Este tip se me ocurrió mientras desarrollaba una aplicación que contendría una gran cantidad de botones con distintos diseños, cada uno diferente, así que era imposible hacer un patrón y reutilizarlos. Además, cada uno de estos dispararía un enlace distinto que el cliente aun no sabía cual, así que el "editaría" después el FLA con la información final.
Cansado de convertir cada vector en botón y luego colocarle un nombre de instancia, pensaba en como haría el cliente para editar las url. Se me ocurrió crear un XML con los nombres de instancia de los botones y las URL, y así poder evitar que el cliente meta la mano al FLA.
La idea es simple y haremos un ejemplo inicial con 5 botones, para eso ya tengo un XML con los nombres de instancia y las URL de cada botón, algo así:
Código :
<data> <d btn='botonZguillez' url='zguillez.html'/> <d btn='botonZah' url='zah.html'/> <d btn='botonElecash' url='elecash.html'/> <d btn='botonXklibur' url='xklibur.html'/> <d btn='botonOtaku' url='otaku.html'/> </data>
Por otro lado, tenemos nuestro FLA con los 5 botones y sus respectivos nombre de instancia(notemos que los nombres de instancia no llevan un patrón o son consecutivos).
Lo primero que haremos es cargar el XML mediante una clase
Código :
package cristalab.utils{ import flash.events.*; import flash.net.*; public class LoaderXML extends EventDispatcher{ public static var ACTION:String = "action"; public var _data:XML; public function LoaderXML (){} //metodo para cargar el XML, recibe como paremetro la url del archivo public function loadXML(url:String):void{ var urlLoader:URLLoader = new URLLoader(new URLRequest(url)); urlLoader.addEventListener(Event.COMPLETE, complete); } private function complete(e:Event):void{ _data = new XML(e.target.data); dispatchEvent(new Event(LoaderXML.ACTION)); } } }
Ahora desde nuestra clase principal llamamos a la clase LoaderXML
Código :
package { import flash.events.*; import flash.display.*; import flash.ui.*; import cristalab.utils.*; public class Main extends MovieClip{ private var t:LoaderXML; public function Main(){ t = new LoaderXML(); t.loadXML("data/data.xml"); //cuando cague el XML llamamos al metodo compare t.addEventListener(LoaderXML.ACTION, compare); } private function compare(e:Event):void{ trace("aqui pondremos el código para hacer la magia"); } } }
Ahora si podemos empezar a hacer código en el método compare, para eso crearemos un for que nos permita recorrer el XML, sacando el nombre de instancia y verificando su existencia en el mcContenedor (gracias Otaku)
Código :
var tmpBTN:SimpleButton; var name:String; var miXML:XML = e.target._data; for(var i:int=0; i< miXML.d.length() ; i++){ name = miXML.d.@btn[i]; if( mcContenedor.getChildByName( name ) != null ) { //AQUI EXISTE EL BOTON } }
Ya casi tenemos todo listo, ahora solo nos queda agregar el evento al boton. También guardo el valor de i en tabIndex para saber la ubicación que tiene en el XML. El método queda así:
Código :
private function compare(e:Event):void{ var tmpBTN:SimpleButton; var name:String; var miXML:XML = e.target._data; for(var i:int=0; i< miXML.d.length() ; i++){ name = miXML.d.@btn[i]; if( mcContenedor.getChildByName( name ) != null ) { tmpBTN = mcContenedor.getChildByName( name ) as SimpleButton; tmpBTN.tabIndex = i; tmpBTN.addEventListener(MouseEvent.CLICK, sayName); } } }
Ahora creamos nuestro método sayName y listo, tenemos nuestro FLA funcionando, aquí el código completo
Código :
package { import flash.events.*; import flash.display.*; import flash.ui.*; import cristalab.utils.*; public class Main extends MovieClip { private var t:LoaderXML; public function Main() { t = new LoaderXML(); t.loadXML("data/data.xml"); t.addEventListener(LoaderXML.ACTION, compare); } private function compare(e:Event):void{ var tmpBTN:SimpleButton; var name:String; var miXML:XML = e.target._data; for(var i:int=0; i< miXML.d.length() ; i++){ name = miXML.d.@btn[i]; if( mcContenedor.getChildByName( name ) != null ) { tmpBTN = mcContenedor.getChildByName( name ) as SimpleButton; tmpBTN.tabIndex = i; tmpBTN.addEventListener(MouseEvent.CLICK, sayName); } } } private function sayName(e:MouseEvent):void { trace(t._data.d.@url[e.target.tabIndex]); } } }
Esto es simple, ahora imagina que si tienes que cambiar la url de algun btn, sólo lo harías en el XML
Es más, ahora agrega 10, 20, 50 botones en el FLA, le pones nombre de instancia y todas las url en el XML solo editas ahi las url y listo, funciona .
Pruébalo, esto salió como jugando y pensando en que uno aveces es flojo ya que con 36 líneas de código, puedes tener N cantidad de botones.
Aquí el ejemplo del tip
Ahora si no quieres usar tabIndex, podemos utilizar el código de Zguillez donde quedaría así:
Clase Main.as
Código :
package { import flash.display.MovieClip; import flash.display.SimpleButton; import flash.events.Event; import flash.events.MouseEvent; import cristalab.utils.LoaderXML; import cristalab.display.SimpleButtonURL; public class Main extends MovieClip { private var t:LoaderXML; public function Main() { t = new LoaderXML(); t.loadXML("datos.xml"); t.addEventListener(LoaderXML.ACTION, compare); } private function compare(e:Event):void { var total:uint = e.target._data.d.length(); var i:uint; var name:String; var url:String; for (i=0; i<total; i++) { name = e.target._data.d.@btn[i]; url = e.target._data.d.@url[i]; if (this.getChildByName(name) != null) { var boton:SimpleButtonURL; boton = new SimpleButtonURL(this.getChildByName(name) as SimpleButton); boton.url = url; } } } } }
Clase SimpleButtonURL.as
Código :
package cristalab.display { import flash.display.SimpleButton; import flash.events.Event; import flash.events.MouseEvent; import flash.net.URLRequest; import flash.net.navigateToURL; public class SimpleButtonURL { private var _url:URLRequest; public function SimpleButtonURL(boton:SimpleButton):void { boton.addEventListener(MouseEvent.CLICK, _navigateToURL); } public function set url(u:String):void { _url = new URLRequest(u); } private function _navigateToURL(e:Event):void { if (_url!=null) { navigateToURL(_url); } } } }
listo, espero les sea útil.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Zguillez el 01 de Febrero de 2009
Buen tip! quedó bien al final con todos los códigos
Por M@U el 01 de Febrero de 2009
Por eparada el 02 de Febrero de 2009
Por gcm el 02 de Febrero de 2009
Por Woller el 02 de Febrero de 2009
Por absulit el 02 de Febrero de 2009
Por Camuss el 02 de Febrero de 2009
Gracias por publicarlo!!!
Por lucasmoyano el 03 de Febrero de 2009
Por eldervaz el 04 de Febrero de 2009
Por Mila2 el 18 de Febrero de 2009
Por sarjuliancho el 23 de Febrero de 2009
Por eruviel el 11 de Abril de 2010
Por Enrique el 24 de Junio de 2010
He seguido los pasos y al exportar no marca ningun error y al dar click sobre alguno de los botones me aparece en la ventana de salida el nombre de la pagina, por ejemplo; index.html pero al montarlo en un html o algo no me lleva a ningun lado, simplemente no jalan los botones, me podrian ayudar porfa? muchas gracias de antemano.
Por enrique el 25 de Junio de 2010
Por Albert el 12 de Septiembre de 2010
la idea es que al pasar por cada uno de los mapas me muestre un contenido Xml y al darle clic me lleve a otros contenidos Xml. la información publicada me ha servido mucho es mas o menos lo que pienso hacer, Agradecería cualquier ayuda.
Por Hagen el 23 de Septiembre de 2010
Saludos!
Por ALBERT el 07 de Octubre de 2010
Por CLAnonimo el 24 de Octubre de 2010
Como puedo adaptar este evento en tu ejemplo, o bíen, cual seria la mejor manera de hacerlo ?
gracias.
Por madeline el 16 de Marzo de 2011
Gracias