jvmBlog Flash y Tecnología

.

Ejemplo de reproductor de radio simple con ecualizador vu meter en flash as3.

Ejemplo simplificado del reproductor de radio y mp3 de AS2 para AS3

Para ponerlo en funcionamiento simplemente hay que editar el archivo incluido en la descarga.

El reproductor solo acepta una radio y un titulo.

Ejemplo:

Reproductor de radio con ecualizador vu meter - - Descargado (223) veces.

.

Nueva version v.1.2 el 04/04/2012 añadido metodo markable

Al final del post encontrareis 2 ejemplos con el nuevo metodo markable y la descarga de los ejemplos.

Flash AS3 Class MenuLiveXR to create static or drop down menu
Menu desplegable en flash as3 actionscript

Aquí os traigo la clase MenuLiveXR para crear menús desplegables que hice hace poco. (los archivos de descarga al final de la entrada)

Esta clase se puede mejorar en muchos aspectos ya que la hice solo para cubrir una pequeña necesidad, aunque tal como está ya cumple con su cometido básico.

Esta clase es de libre uso y si alguien decide realizarle algunas mejoras y quiere reportarlas entonces encantado subiré las nuevas versiones para que estén disponibles para su descarga.

El uso de la clase es muy sencillo

Ej:

Primero importamos la clase y una vez importada creamos una nueva variable para instanciarla pasándole 2 parámetros obligatoriamente, el primero requiere un String que solo acepta los valores "MASTER" o "SLAVE", el segundo parámetro requiere una cadena o String identificativo para el nombre del menú.

PARAMETRO 1: _Type(String)

_Type - acepta los valores "MASTER" o "SLAVE" y las reglas que debemos tener en cuenta para definir un menú como MASTER o SLAVE son las siguientes:

1 Si creamos un solo menú este debe definirse "siempre" como MASTER ya que solo los menús MASTER pueden inicializarse con el método startMenu() los menús definidos como SLAVE no pueden inicializarse desde fuera de la clase.

2 Solo los menús definidos como MASTER deben agregarse al displayList con addChild(miMenu) los menús definidos como SLAVE son agregados al displaylist automáticamente por el menú MASTER.(Los menús definidos como SLAVE se pueden agregar al displaylist pero produciría un comportamiento erróneo del menú)

3 Solo un menú definido como MASTER se puede configurar con el método setConfig(); los menús SLAVE adoptan automáticamente la configuración del menú MASTER. (En una posible revisión se mirara de agregar un método de configuración abreviado para los menús definidos como SLAVE).

REVISIÓN:

(Ahora ya se permite utilizar el método setConfig con los menús ESCLAVOS para configurarlos independientemente del menú MASTER, si el método setConfig no es utilizado en un submenú el submenú adoptara la configuración del menú superior del que sea hijo o del menú MASTER)

4 Un menú definido como MASTER no puede asociarse a otro menú MASTER

5 Un menú definido como SLAVE se puede asociar a un menú MASTER

6 Los menús definidos como SLAVE se pueden asociar a otros menus SLAVE

7 Un menú MASTER no se puede asociar a un menú SLAVE

PARAMETRO 2: _MenuName(String)
_MenuName - Requiere un nombre para el menú, necesario solo para identificar que menú emitió un error en el caso de que rompiera alguna de las reglas anteriores.

--------------------------------------------------------------------------------------------------------------------

Una vez tengamos nuestro menú instanciado pasaríamos a configurarlo con el método setConfig
Ej:

El metodo setConfig acepta 8 parametros

[Dir:String] – Indica la dirección del menú y los valores posibles son "V" para VERTICAL y "H" para HORIZONTAL.

[MenuAlign] - Especifica la alineación del menú a la derecha, izquierda o centro respecto a la posición X inicial del objeto. Los valores pueden ser "R" = RIGHT, "L" = LEFT, "C" = CENTER(El valor de este parámetro hace variar la posición X del menú, Si hemos colocado el menú en la posición x = 0 del stage y la alineación es "L" el menú aparecerá desde la posición 0 a la derecha, si la alineación es "R" el menú aparecerá desde la posición 0 a la izquierda y si la alineación es "C" el menú aparecerá centrado en la posición 0). Por defecto el valor es "C"

[EqualWidth] - Si EqualWidth es igual a false el ancho de cada botón se ajusta al ancho de su texto. Si es true el ancho de todos los botones se ajustan al ancho del botón que contenga el texto más ancho. Por defecto el valor es false.

[TextAlign] - Si se ha especificado EqualWidth a true podemos especificar la alineación del texto, por defecto el valor es "C". Los valores pueden ser "L" = LEFT, "R" = RIGHT, "C" = CENTER. Si _EqualWidth no está definido o su valor es false la propiedad TextAlign es ignorada aunque este definida (Esto es así porque si los botones están ajustados al texto no hay espacio para alineación.

[DropDown] - Si el valor es true entonces se mostrara el menú como desplegable mostrando solo el primer botón y el resto se desplegara al pasar el ratón por encima. Si el valor es false todos los botones del menú principal serán visibles. (Esta propiedad solo afecta a los menús MASTER, aunque modificando la clase puede hacerse para que jerárquicamente los menús SLAVE tomen el mismo comportamiento).

[SpacingButton] - Espacio o separación entre los objetos y márgenes contenidos dentro de cada botón expresado en pixeles.
Los márgenes se aplican de la siguiente manera en un botón sin icono: Botón --> [ margen ( texto Botón ) margen ]
y un botón con icono: Botón --> [ margen [ icono ] margen ( texto Botón ) margen ]

[MenuSpace] - Espacio o separación entre botones. Si el menú es vertical el espacio se aplica en Y si es horizontal el espacio se aplica en X

[Markable] - (NUEVO METODO) Específica si los botones pueden ser marcados al hacer clic (Solo quedara marcado el último botón al que se haya hecho clic). Además si Markable es true se podrá utilizar la propiedad pública MENU.markedByIndex(1), con la que podremos marcar un botón por defecto a voluntad.

--------------------------------------------------------------------------------------------------------------------

Una vez configurado nuestro menú tenemos que pasar a configurar y añadir los botones del mismo y para tal uso utilizaremos el método setButton();

Podemos añadir tantos botones como queramos utilizando para ello el método setButton, este método acepta los siguientes parámetros:

[TextButton] – Cadena de texto para el botón

[ButtonName] – Nombre interno del botón ej: Botón1, Botón2, Botón3 etc. Puede especificarse una cadena bacía "" entonces automáticamente se le dará un nombre con un numero incremental. (Esta propiedad es necesaria en el caso que necesitamos averiguar que botón a lanzado el evento si hemos especificado la misma función para todos los botones en el parámetro onClickFunctionCall).

[onClickFunctionCall] – Requiere el nombre de una función que será ejecutada al hacer click en el botón.(Si no es necesario puede especificarse null. Se puede especificar una función diferente para cada botón o una misma función para todos los botones, la clase retorna a la función el objeto que ha lanzado el evento(Si se ha especificado una misma función para todos los botones se puede identificar que botón a lanzado el evento con e.currentTarget.name)

[ButtonIcon] – Requiere una instancia Sprite de una imagen (Ej: imagen o símbolo como MovieClip de la biblioteca exportado para actionscript. Si no es necesario puede especificarse null) .

[slaveMenu] - Requiere un objeto o instancia de la clase menú definido como SLAVE, este parámetro sirve para asociar a este botón un menú ESCLAVO, al pasar el ratón por encima de este botón se desplegara dicho menú.(Solo se pueden pasar como parámetro instancias de menús definidos como SLAVE, intentar asociar un menú MASTER a un botón dará un error)

----------------------------------------------------------------------------------------------------------------

Recordad que mediante el parámetro [onClickFunctionCall] del método setButton podemos especificar una función independiente para cada botón o la misma función para todos, en el siguiente código de ejemplo yo he optado por utilizar la misma función para todos los botones.

Una vez tengamos los botones necesarios configurados ya solo nos faltara colocar nuestro menú en la posición deseada e inicializarlo con el método startMenu(); con lo que el resultado final sería el siguiente:

Ejemplo flash:

Nota: Si el menu se sale fuera del escenario la alineacion de los submenos se invierten.
El uso del campo para añadir separacion entre botones solo funciona correctamente cuando se utiliza un solo menu y no esta marcada la opción como desplegable

(REVISION NUEVA PROPIEDAD markedByIndex(0) AGREGADA);
Si el nuevo parámetro markable del método setConfig es true entonces podemos marcar el botón con la propiedad pública markedByIndex(0). Esta propiedad debe utilizarse siempre después de haber inicializado el menú con startMenu(). Si el metodo markable es false la propiedad markedByIndex(0); es ignorada.

Finalmente los metodos disponibles para la clase són:
MENU.setConfig();
MENU.setButton();
MENU.startMenu();
MENU.markedByIndex(0);

Bueno hasta aquí hemos aprendido a configurar un menú MASTER, podemos crear tantos menús MASTER como queramos y combinarlos entre sí, aunque existe otra manera de combinarlos y es utilizando menús definidos como SLAVE, es decir podemos crear un menú SLAVE y asociarlo a un menú MASTER consiguiendo que al pasar el ratón por uno de los botones del menú MASTER se desplegué el menú SLAVE.

Para crear un menú como SLAVE creamos una nueva instancia de la clase MenuLiveXR y le pasamos al primer parámetro el valor SLAVE y al segundo parámetro un nombre identificativo.
Solo hay que tener en cuenta que las instancias de los menús definidos como SLAVE no se deben añadir al displayList, tampoco es necesario configurarlas mediante setConfig ni tampoco inicializarlas con startMenu, simplemente debemos añadir y configurar los botones necesarios para el menú.

Ej:

Ahora os estaréis preguntando vale muy bonito pero ¿cómo asocio este menú SLAVE al menú MASTER y que se desplegué al pasar el ratón por el botón descargas? Pues muy fácil, sencillamente le pasamos el nuevo menú al parámetro [slaveMenu] del método setButton del menú MASTER .

Ej:

También podemos crear otro Nuevo submenú SLAVE y hacer que cuelgue del subMenuDescargasSlave asociándolo por ejemplo al botón btnFlex, como debéis imaginar podemos hacer que un menú SLAVE cuelgue de otro menú SLAVE y a su vez de otro y de otro etc. Además al igual que con los botones de un solo menú podemos asociar una misma función para todos los botones o una función para cada uno, podemos hacer lo mismo con todos los menús que existan, es decir podemos tener 20 menús y una sola función asociada a todos los botones.

Se puede combinar de muchas maneras, podemos hacer que un mismo menú cuelgue de diferentes botones de un solo menú máster o de dos o tres... El limite esta en tu imaginación.

Aquí dejo el ejemplo final un menú del que cuelgan 2 submenús más:

Ejemplo Flash:

Para modificar el diseño del boton basta con acceder al movieclip del boton y cambiar su diseño.
Nota: Si el menu se sale fuera del escenario la alineacion de los submenos se invierten.
El uso del campo para añadir separacion entre botones solo funciona correctamente cuando se utiliza un solo menu y no esta marcada la opción como desplegable

Menu desplegable Live actualizado a la versión v1.1 el 23/01/2012

Ahora se permite configurar independientemente los menus SLAVES, si no se configuran heredan la configuración del menu MASTER.
Los botones con menú asociado ahora muestran un pequeño icono(flecha)
Añadido un nuevo parametro path que retorna una cadena o url al hacer click
Para ver un ejemplo final de la v1.1 hacer click aqui

Menu desplegable Live actualizado a la versión v1.2 el 04/04/2012

Nuevo parámetro Markable añadido, este parámetro permite dejar marcado el ultimo botón pulsado, además si Markable es true también se permite marcar un botón por defecto con la nueva propiedad pública de la clase menú "markedByIndex(0)" si el parámetro markable del método setConfig es false la propiedad markedByIndex() es ignorada.

Ejemplo simple:

Resultado ejemplo simple:

Ejemplo con 2 sub menús y refactoring revisado con el metodo markable:

El efecto de marcado puede ser cambiado editando el codigo del movieclip boton de la libreria.

Descargar archivos de ejemplo para MenuLiveXR - - Descargado (68) veces.

Social Report xavirobot

How to modify or access the text of a button with dynamic text field manually created with the Button class and Flash AS3

Alguna vez nos hemos encontrado con botones con texto dinamico y hemos querido cambiar el texto del interior dinámicamente mediante código y no hemos podido, si es tu caso y te as encontrado que no puedes cambiar el texto dinamico de un boton pues la solución es sencilla, aquí os dejo los pasos a seguir.

Primero dibujamos un rectángulo en el escenario, pulsamos f8 le damos como nombre de instancia "miBoton" y lo convertimos en símbolo de tipo botón.
Accedemos al botón le añadimos los 3 fotogramas(keyFrames) de estado y le añadimos a cada estado un rectángulo de color diferente y un campo de texto dinámico con nombre de instancia "miTexto".

Volvemos al escenario y accedemos a la ventana de acciones del primer fotograma y añadimos alguna de las dos opciones del código siguiente:

Option 1

O simplemente podemos utilizar algo más sencillo

Option 2 ( Esta es más mejor ;D )

Cabe destacar que para que el texto se refleje en los tres estados es necesario cambiarlo en los tres, tanto en la opción 1 como en la 2, en la opción 2 la cosa sería tal que así:

De esta manera cambiar el texto dinamico en un botón manual es muy sencillo y evitamos el error 1119: Access of possibly undefined property ot through a reference with static type flash.display:SimpleButton. por intentar acceder directamente al campo de texto dinamico de un boton manual

Social Report xavirobot

Para los que quieran empezar a trastear con el lenguaje c# Sharp y no saben por dónde empezar ni que descargar, aquí dejo un mini manual con los pasos a seguir para que puedan descargar las herramientas necesarias.

En primer lugar nos dirigiremos a la siguiente dirección desde donde nos descargaremos la versión gratuita del visual studio 2010 express para el lenguaje c# sharp

http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-csharp-express

1) Una vez en la web nos aparecerá la siguiente pagina donde escogeremos el idioma y pulsaremos en install now

2) Una vez pulsado install now nos aparecerá la siguiente pantalla y pulsaremos en la segunda opción Install Visual Studio 2010 Express C# para comenzar la descarga.

3) Una vez descargada la aplicación la ejecutaremos para su instalación y nos aparecerá la siguiente pantalla donde antes de pulsar en siguiente deseleccionaremos el checkbox en el caso que no deseemos reportar información sobre la instalación a Microsoft.

4) En esta pantalla aceptaremos los términos y condiciones y pulsamos en siguiente.

5) En esta pantalla nos indica la ruta de instalación y los productos necesarios para la instalación que se descargaran, pulsamos en instalar.

6) En esta pantalla empezara el progreso de descarga de los productos

7) Una vez descargado e instalado nos aparecerá la siguiente pantalla indicándonos que la instalación ha sido completada y pulsamos en salir.

8) Una vez instalado ejecutamos la aplicación y nos dirigiremos al menú de herramientas de la parte superior de visual studio y pulsaremos en el botón de ayuda y nuevamente en el botón de registrar producto. Aunque la aplicación es gratuita es necesario registrarse para que el producto no expire.

9) Una vez pulsado el botón de registrar producto nos aparecerá una nueva pantalla donde se nos pedirá la clave del producto, como seguramente no dispondremos de la clave pulsaremos en obtener una clave de registro en línea.

10) Una vez pulsado el botón de obtener clave nos enviara a una dirección web de Microsoft donde deberemos introducir una cuenta de correo de Hotmail para identificarnos.

11) Una vez identificados nos aparecerá una página donde deberemos rellenar nuestros datos y contestar algunas preguntas.
Una vez cumplimentado el formulario pulsaremos aceptar y la clave nos será enviada al correo electrónico, ya solo deberemos introducirla en la pantalla de registrar producto para poder utilizar nuestro visual studio 2010 express sin miedo a que expire.

12) Una vez tengamos la aplicación instalada y registrada necesitaremos instalar la última versión del framework para que nuestros proyectos puedan correr sin problemas. Para instalar la última versión del framework 4 no dirigiremos a la siguiente dirección.

http://www.microsoft.com/downloads/es-es/details.aspx?FamilyID=9cfb2d51-5ff4-4491-b0e5-b386f32c0992

Una vez estemos en la web pulsaremos en el botón descargar y cuando dispongamos de la descarga simplemente ejecutamos la instalación del framework y listos una vez instalado ya podréis empezar a programar vuestro primer Hola Mundo en C# Sharp con Visual Studio 2010 express.

Esto es todo espero que os sea de utilidad.
En una próxima entrada explicare como realizar nuestro primer proyecto con el típico ejemplo de hola mundo.
Saludos.