lunes, 18 de noviembre de 2013

Cómo establecer el tema de un Botón de Enlace en Halo con ActionScript

Flex proporciona múltiples formas de crear enlaces de botón componentes. 

BOTÓN DE ACTIONSCRIPT

Flex Builder es un diseño web y desarrollo de software utilizado para crear aplicaciones dinámicas de Internet. XML y ActionScript son los dos principales idiomas utilizados en Flex. XML establece la estructura de la página web y ActionScript proporciona la funcionalidad. Un desarrollador usará XML y ActionScript para crear un enlace de tecla con un efecto de halo. Con unas pocas líneas simples de código, puede completar todo el proceso. El desarrollador también puede personalizar el efecto utilizando las propiedades disponibles en la biblioteca de Flex Builder.



Lo que necesita

Flex Builder 4.5 Sugerir Edita Crear el Botón de Enlace



Abra su principal aplicación Flex y cambie a la vista código. Coloque la apertura y cierre de etiquetas para el botón de enlace en la aplicación Flex:



mx: LinkButton / mx: LinkButton



Ajuste el estilo de su botón de enlace y añadir el texto apropiado. Coloque las propiedades del botón de enlace dentro de la etiqueta de apertura del botón de enlace.



mx: label = LinkButton Mi Vínculo Botón color = 0000FF / mx: LinkButton



El código anterior crea un botón de enlace con el texto azul que lee mi Enlace Button.



Importe la clase Alert ActionScript. Agregue la declaración de importación después de la etiqueta de apertura y la aplicación antes de que su botón de enlace:



fx: Guión importación mx.controls.Alert; / fx: Guión



El código anterior permite Flex sabe que incrustar ActionScript en el archivo de la aplicación. También le da accesos a la funcionalidad de la clase Alert.



Ejecute la aplicación. Por defecto, un botón de enlace va a producir el efecto de halo, una vez que el usuario se desplaza sobre el texto del vínculo. Compruebe que dispone de un control de botón de vínculo de trabajo con un efecto de halo.

Crear un Spark Enlace Button Piel



Creación de la piel para su botón de enlace Spark Flex. Flex utiliza múltiples tipos de componentes. Estilos únicos pueden ser aplicados a Spark botones de enlace. Abra un archivo nuevo tapiz Spark o un archivo de la piel Spark existente. Si eres nuevo en el Spark componentes, puede localizar un archivo de plantilla de piel Spark, abriendo la carpeta de aplicaciones Spark.



Vuelva a colocar la apertura Spark piel etiqueta con la siguiente línea de código:



s: SparkSkin xmlns: fx = http://ns.adobe.com/mxml/2009 xmlns: s = biblioteca :/ / ns.adobe.com / flex / chispa xmlns: mx = biblioteca :/ / ns.adobe.com / flex / Halo



Agregue la siguiente informaiton Metadta debajo de la etiqueta Opeing.



fx: Metadatos [HostComponent (spark.components.Button)] / fx: Metadatos



Agregue el código que definirá el estilo de su botón de enlace de halo.



s: Estados mx: Nombre del estado = arriba / mx: Nombre del estado = abajo / mx: Nombre del estado = sobre / mx: Nombre del estado = desactivado / / s: estados



El código anterior nombra a los diferentes estados de los botones de enlace, lo que le permite acceder a ellos y aplicar estilo posterior.



s: Rect izquierda = derecha = 0 0 top = 0 inferior = 0 / s: Rect



Este código crea un halo rectángulo y define su ubicación en relación con el vínculo.



s: Rect izquierda = derecha = 0 0 top = 0 inferior = 0 = includeIn sobre radiusX RadiusY = 15 = 15 s: mx carrera: peso SolidColorStroke = 3 color = 0x6600FF / / s: Carrera s: relleno mx: Color SolidColor = 0x6600FF / / s: llenado / s: Rect



La propiedad de trazo anterior crea un golpe de peso 3-pixel alrededor de un rectángulo de color púrpura. Establece el estilo de halo.



Agregue el código para el botón de encendido:



s: id = Botón sparkBtn skinClass = etiqueta theFolderNameWhereYourSkinIsSaved.TheNameofTheSkinFile = TheBtnTitle /



El código anterior crea un botón de encendido con el estilo que acaba de crear TheBtnTitle etiquetado.



Consejos y advertencias

Flex y ActionScript XML distinguen entre mayúsculas y minúsculas. Si la aplicación no está funcionando correctamente, compruebe de capitalización.



 

No hay comentarios:

Publicar un comentario