Animación imagen por imagen (Frame by Frame) - Flash CS3

Ejemplos a Elaborar:

En este tutorial trabajaremos con flash cs3, El tutorial explicara cómo hacer una animación simple imagen por imagen para ir conociendo poco a poco esta poderosa herramienta como lo es Flash en todas sus versiones.

Video Parte 1:

Las Herramientas que tenemos en el lateral izquierdo son muy similares a las de Paint, en ella ubicamos el botón que dice Herramienta Texto o simplemente apretamos la letra T de nuestro teclado.

En la barra inferior vemos unas pestañas que al hacerle clic a propiedades vemos que podemos modificar el tipo de letra y el tamaño.

Colocamos la letra en el tamaño 72 para verlo en grande para este tutorial. En nuestra hoja de trabajo aremos clic y escribiremos en numero 1.

En la barra superior está nuestra línea de frames que por defecto está en una línea que se llama capa 1 o layer 1, al lado de él esta nuestra única hoja con un ponto negro, si tiene un punto blanco es que no hemos escrito o dibujado algo en nuestra hoja de trabajo.

Para crear otra hoja que sería la continuación de nuestra animación, le damos clic derecho al frame 2 y le decimos insertar fotograma clave o insertar fotograma.

La diferencia entre las 2 es que al insertar un fotograma sería crear una hoja en blanco nueva y al insertar un fotograma clave estamos copiando la hoja anterior con su mismo dibujo. Para este tutorial insertaremos un fotograma clave.

Cambiamos el texto que dice 1 por un 2, y procedemos a insertar otro fotograma clave y cambiamos el 2 por un 3, así hasta llegar al 12.

Una vez hecho esto, para ver nuestra primera animación en nuestra hoja de trabajo

• Control
• Reproducir

Un acceso rápido seria, asegurarse que no tenemos nada seleccionado en nuestra hoja de trabajo y le damos a la tecla Intro o Enter.

Para ver nuestra animación en una ventana aparte, lo que llamaremos probar nuestra animación haremos

• Control
• Probar película

Un acceso rápido seria, CONTROL – INTRO o CONTROL-ENTER.

Apreciaremos algo como lo siguiente:

Veremos que los números pasan muy rápido y no podemos apreciarlos todos, el motivo es debido a que creamos 12 imágenes pero flash como ya lo comentamos pasa 12 imágenes por segundo por defecto.

Vamos a ver como manipular los frames por segundo o imágenes por segundo.

Video Parte 2:

Nos paramos en nuestra hoja de trabajo en cualquiera de los 12 números que hicimos y hacemos clic en la hoja blanca de manera que no tengamos seleccionado ningún objeto, en la barra inferior dentro de la pestaña propiedades, encontraremos todas las propiedades de nuestra hoja de trabajo, Tamaño, Color de fondo, Perfiles, Tipo de ActionScrip y también esta a lo que íbamos que seria la velocidad de frames, fíjense que dice 12 fps (frame por segundo), cambiamos el 12 por 1.

A continuación veremos nuestra animación nuevamente, hacemos clic sobre la hoja en la zona blanca y le damos intro o enter para verlo en la hoja de trabajo o hacemos CONTROL-INTRO o CONTROL-ENTER para verlo en una ventana aparte.

Se verá algo así:

Guias y MovieClips - Flash CS3

Ejemplo a Elaborar:


Sencillo tutorial, en el cual explicamos cómo usar las guías y los frames para hacer animaciones, las cuales no estén atadas a un movimiento recto.

1. Guias

Una guía, es un layer u hoja, en la cual podemos dibujar segmentos de rectas continuas para lograr un camino o canaleta, en la cual nuestro dibujo convertido en MovieClip va a seguir.

Ilustrándolo con un ejemplo de la vida real, podemos asociarlo con un tren, nuestro dibujo “TREN” va a representar nuestro MovieClip y nuestra guía o canaleta será la vía del tren. Nuestro dibujo nunca se va a salir de las vías como un tren no se sale de las vías del tren, jajajaja en TEORIA.
¿Cómo crear un MovieClip?
Bueno existen varias maneras, en las cuales voy a describir 2 de ellas:

1. Seleccionamos nuestro dibujo que queremos convertir y vamos a la pestaña MODIFICAR y seleccionamos CONVERTIR EN SIMBOLO y en las opciones colocamos MOVIE CLIP.
2. La segunda manera es seleccionando todo lo que queremos convertir y le damos a la tecla F8, y de igual forma seleccionamos que es de tipo MovieClip.

De esta manera podemos lograr la animación que vemos arriba, y se puede ver cómo hacer una guía en el siguiente video:

Video

2. MovieClip

Un MovieClip no es más que una hoja totalmente independiente de la principal, lo único que comparten es la velocidad de las imágenes por segundo o FPS. Esto nos permite dibujar o hacer animaciones una totalmente independiente de la otra.

Si toda nuestra animación la construimos en nuestra hoja principal estamos atados a una sola línea del tiempo, en cambio si usamos movieclips podemos hacer animaciones con líneas del tiempo independientes, como podemos apreciar en el ejemplo de arriba.
Les dejo un video para ver cómo podemos lograr esta animación.

Video

Saludos.

Interpolación de movimiento y forma - Flash CS3

Ejemplos a Elaborar:

Primero veremos una sección de Movimiento y Cambio de color y luego sobre el mismo principio desformaremos la figura básica para lograr otra de forma animada.

1. Color y Movimiento

La interpolación de forma o shape tween consiste en mover o animar un objeto de acuerdo a dos fotogramas, para ponerlo en palabras mas sencillas podemos decir, tengo un carro Rojo y lo quiero pasar a Verde, tenemos 2 estados, la acción de pasar de rojo a ver es muy ardua, por lo tanto existen herramientas que lo hace por nosotros.

En un fotograma uno dibujamos una figura roja en el fotograma 32 le damos a insertar fotograma y dibujamos la misma figura pero de otro color si la dibujamos en otra posición (x,y) también veremos movimiento.
Luego nos colocamos en un fotograma que este entre el 1 y el 32 y le damos al botón derecho del mouse. Y colocamos la opción Shape Tween, y veremos cómo los fotogramas cambian de color de blanco a verde y tendremos una flecha que sale del fotograma 1 y termina en el fotograma 32. Creando así una interpolación de color y un movimiento.

Video

2. Forma y Color

De igual forma se puede cambiar la forma de los objetos y el color a la vez.

En el fotograma 1 colocaremos un objeto cualquiera , insertaremos un fotograma en la posición 32 en el cual colocaremos un objeto totalmente diferente, y agregaremos otro fotograma en la posición 64 el cual contendrá la misma figura que el fotograma uno.

Video

Con la combinacion de estos movimientos se puede llegar a hacer animaciones bastante interesantes, solo hay que tener imaginacion y un poco de paciencia. Esto fue todo por este tutorial espero que encuentren el material de su interés.
Saludos.

Hola Mundo php con flex - Flex 3

OBSERVACION: amfPHP 1.9 es soportado hasta Php 5.2.xxx

Ejemplo a Elaborar:

Para conectar una aplicación Flex con PHP necesitamos un protocolo que pueda hablar los 2 idiomas que pueda hablar Flex y que pueda hablar PHP y aun más pueda traducir lo que habla uno para entender al otro.
AMF (Action Message Format) es un formato binario basando en SOAP (Simple Object Access Protocol). AMF fue creado para intercambiar datos entre aplicaciones Adobe Flash y bases de datos, básicamente usando RPC (Remote Procedure Call).
AMF contiene una estructura completa que contiene manejo de ERRORES y una RESPUESTA que estaremos esperando como un Objeto de ActionScript, esto quiere decir en pocas palabras que AMF al hacer una petición puede devolver 2 cosas una respuesta en el evento RESULT y si en dado caso exista un error en la trasmisión de datos o simplemente no existe lo que estamos buscando el error se devolverá en el evento FAULT.
AMF por ser un formato binario tiende a ser más rápido en la comunicación que el paso POST o GET de PHP o el enviar un XML a php interpretarlo y devolver un XML e interpretarlo en Flash.
SOAP, es un protocolo para mandar información estructurada implementada en Web Services, que sirve para hacer RPC para la negociación y recepción de mensajes.
En este ejemplo veremos cómo conectar FLEX con PHP mediante AMFPHP, creando un simple servicio web en el cual mandaremos un mensaje y recibiremos el mismo mensaje en FLEX.




Lo primero que necesitamos es la carpeta de AMFPHP que la podemos encontrar en esta dirección http://sourceforge.net/project/showfiles.php?group_id=72483&package_id=72363&release_id=541961 y podemos bajarla de cualquiera de los dos espejos.

Luego necesitaremos un Servidor Web, yo siempre he usado WAMP y me a funcionado muy bien ya que tiene MySQL , APACHE y PHP y es todo lo que necesitamos. Se lo pueden bajar de la siguiente dirección http://www.wampserver.com/en/download.php

Una ves instalado WAMP tendremos un icono al lado de nuestro reloj del sistema en forma de un semi circulo blanco con negro.

Y también tenemos nuestro Servidor en la siguiente dirección C:/wamp/www donde colocaremos todas nuestras páginas .php .html .asp Etc…

Luego una vez descargado AMFPHP colocaremos la carpeta dentro de WWW la cual nos permitirá acceder a nuestros, servicios vía WEB, creando así nuestro primer WEB SERVICES. Pero aun nos queda mucho camino por recorrer.

Para probar que AMFPHP esté funcionando correctamente dentro de nuestro Browser colocamos http://localhost/amfphp/gateway.php y recibiremos un mensaje “amfphp and this gateway are installed correctly.”
Y procedemos al darle al LINK que dice “Load the service browser” que es lo mejor que se a podido inventar AMFPHP que es un brower de WEB SERVICES donde podemos probar nuestros servicio debugearlos y hasta generar códigos que funcionan en FLX y FLASH para los que SOMOS un poco Flojos al momento de programar.

Una vez dentro de nuestro Services Browse vemos que no hay ningún tipo de servicios asociados al Explorador.

Por lo que crearemos un servicio llamado HelloWorld.php, tenemos que tener mucho cuidado en colocar .php y no cualquier otro tipo de extensión y lo vamos a colocar en la siguiente dirección C:\wamp\www\amfphp\services

Abrimos HelloWord.php con un editor de texto y echamos nuestras funciones la cual constara de una función que recibe un parámetro y devolverá el mismo parámetro pero con un texto concatenado el cual será “USTED ESCRIBIO: ”.

El código de HelloWord.php:

<?php
class HelloWorld
{
function HelloWorld(){    
}

function say( $mensaje )
{
return 'USTED ESCRIBIO: ' . $mensaje ;
}
}
?>

Una vez que cuadramos nuestro código recargamos la pagina y veremos que nuestro servicio HelloWord aparece en nuestro Explorador de servicios para probarlo hacemos click sobre HelloWord y nos presentara una entrada de texto donde escribiremos “HOLA MUNDO” y nos responderá “USTED ESCRIBIO: HOLA MUNDO”.

Si todo se ha hecho bien podemos seguir ahora con la programación de un simple programa en Flex. Abriremos Eclipse y crearemos un nuevo Proyecto que tenga como servicio a PHP.
Entonces en Eclipse vamos a FILE -> NEW -> FLEX PROJECT

Le damos un nombre al proyecto, una vez que llenamos los campos le damos a siguiente “NEXT”. Creamos una carpeta en “C:\wamp\www” la cual llamaremos PRUEBAS y nos quedara la siguiente dirección “C:\wamp\www\Pruebas”. y le decimo a eclipse que compile todo a esta carpeta.

Bueno ya toda la configuración esta, ahora, manos a la obra.

Vamos a crear un texto de entrada donde podremos escribir el mensaje que queramos, crearemos un Botón el cual se encargara de enviar la información que queramos a PHP y luego crearemos un texto de Salida el cual se encargara de leer lo que PHP nos allá mandado.

Codigo tutorialAMFPHP.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

private function onClick():void{
amf.say.send(myText.text);
}

private function handlerResult(e:ResultEvent):void{
outText.text = String (e.result);
}
private function handlerFault(e:FaultEvent):void{
outText.text = String (e.message);
}

]]>
</mx:Script>
<mx:RemoteObject
id="amf"
source="HelloWorld"
destination="amfphp">
<mx:method name="say" result="handlerResult(event);"  fault="handlerFault(event);"/>
</mx:RemoteObject>
<mx:VBox verticalGap="10" horizontalGap="10" paddingLeft="10" paddingTop="10">
<mx:HBox>
<mx:Label text="MENSAJE A ENVIAR ->"/>
<mx:TextInput id = "myText" />
<mx:Button click="onClick();" label="Enviar"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="MENSAJE A LLEGAR ->"/>
<mx:TextArea id="outText" />
</mx:HBox>
</mx:VBox>
</mx:Application>

Una ves escrito el código esto no es todo lo que necesitamos, FLEX BUILDER no sabes nada de que existe AMFPHP entonces de algún modo se lo tenemos que decir mediante un archivo de configuración de SERVICIOS que es el que dice mira para comunicar PHP con FLEX usaremos AMFPHP.

Este archivo lo llamaremos SERVICES-CONFIG.XML y lo llenaremos con el siguiente código:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amfphp-flashremoting-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">

<destination id="amfphp">
<channels>
<channel ref="my-amfphp"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
<endpoint uri="/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>

Una ves que tengamos esta configuración puesta en muestra carpeta SRC vamos a tener que decirle al compilador que ese archivo esta hay de el siguiente modo, hacemos Click derecho en nuestro proyecto luego vamos a “PROPIEDADES” y en FLEX COMPILER en el espacio que dice ADDITIONAL COMPILER ARGUMENTS agregamos, no borramos nada solo agregamos un espacio y colocamos -services "services-config.xml"


Una ves hecho esto Estamos listo para Probar nuestro programa y comunicarnos con HelloWorld.php mediante WEB SERVICES.
Antes de terminar este tutorial, quiero hacer unas acotaciones MUY IMPORTANTES y se las presentare \en las siguientes imágenes.
Una acotación para esta imagen es Supongamos que tenemos una carpeta dentro de services llamada MyServices y nos queda C:\wamp\www\amfphp\services\MyServices y tenemos nuestro HelloWord.php dentro de esa carpeta en nuestro código justo donde dice SOURCE=”HelloWorld” colocaremos SOURCE=”MyServices.HelloWorld” para poder hacer referencia al mismo nada de MyServices/HelloWorld ni nada parecido.

En cuanto a los métodos podemos tener tantos métodos como dentro del HelloWold.php hallan.
En otras palabras, se colocarían en tantos tag de Method como funciones tengamos dentro de HelloWorld.php.

Y por ultimo
Esta imagen sale acotación para prevenir que si ustedes tienen AMFPHP EN OTRO LUGAR que no sea C:\wamp\www\amfphp entonces nuestro SERVICES-CONFIG.XML no nos va a servir por lo que el proyecto no va a funcionar tampoco.

Aquí les dejo todos los archivos y el ejemplo corriendo

Descargar Archivos:

• tutorialAMFPHP.mxml
• services-config.xml
• HelloWorld.php (CLIC DERECHO -> GUARDAR COMO ENLACE)

Ejemplo:

Saludos.

Mouse Events - Eventos del Mouse - Flex 3

Ejemplo a Elaborar en MXML y en ActionScrip:

Muchas veces queremos hacer cosas cuando ocurren ciertos eventos, como hacer clic sobre algo o pasar por arriba de un objeto, etc. Flex Tiene escrita varias clases para el manejo de eventos, estas clases son escritas completamente en action scrip las cuales algunos objetos heredan para facilitarnos las vida al momento de querer hacer algo cuando ocurra un evento en particular.
Hay que tener en cuanta solo 3 cosas cuando hablamos de eventos, saber que es un Dispacher, saber que es un Listener y saber que es un Event Object:

• 1. Dispacher: El objeto que es manipulado por el usuario y que dispara el evento. No olvidemos de que además de que los eventos son disparados automáticamente como respuesta a una acción del usuario también podemos dispararlos manualmente con ActionScript. (sacado de: http://www.holaflex.com/?p=40).
• 2. Event object : Este es un objeto creado de acuerdo al tipo de acción generada y es el elemento que toma información del dispatcher para compartirla con otros componentes. (sacado de: http://www.holaflex.com/?p=40).
• 3. Listeners: Objetos que escuchan y responden a dichos eventos, es decir, son los objetos que están registrados para tomar una acción cuando cierto evento es disparado en algún otro objeto. (sacado de: http://www.holaflex.com/?p=40).

Una vez que sepamos esto bien podemos hacer un ejemplo en el cual tomamos una imagen y escuchamos todos 6 eventos seleccionados:

• Evento mouseOut: Mouse Out dispara un evento cuando el mouse ya no está sobre la imagen, ósea si estamos parado sobre ella y nos salimos de ella por cualquiera de sus lados este evento se disparara, valido acotar que solo se dispara cuando sale, no es que se dispara varias veces muestras este fuera de la imagen.
• Evento mouseOver: Mouse Over dispara un evento cuando el mouse entra a tocar la imagen, de igual manera se dispara solo cuando entra mas no varias veces por estar dentro de la imagen.
• Evento mouseDown: Mouse Down dispara un evento cuando bajamos el botón izquierdo del mouse sobre la imagen, solo una vez mientras el botón este abajo esto no significa que se dispara varias veces mientras mantengamos apretado el botón.
• Evento mouseUp: Mouse Up dispara un evento cuando soltemos el botón izquierdo sobre la imagen.
• Evento click: Click dispara un evento cuando se hace clic k con el botón izquierdo del mouse, la diferencia entre click con mouse up y mouse down es que el clic tienen que ocurrir los 2 eventos tanto down como up sobre la imagen, en cambio si hacemos mouse down sobre la imagen y mantenemos presionado y nos salimos de la imagen y hacemos mouse up se contara el evento mouse down pero el mouse up no se disparara y de la misma forma si hacemos mouse down fuera de la imagen y dejamos presionado al pararnos sobre la imagen y soltar el botón se contara el mouse up pero el mouse down nunca se disparo.
• Evento mouseMove: mouse move se dispara tantas veces como nos movamos dentro de la imagen, este evento entra varias veces y podemos ver esta acción en el ejemplo al colocar la posición del mouse dentro de la imagen, esta posición se refresca cada vez que hacemos un movimiento dentro de la imagen.

Los eventos también se pueden hacer en MXML o en AS 3.0 veamos el ejemplo escrito de las dos maneras:

Ejemplo I, escrito en MXML:

Codigo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xFFFFFF">
<mx:VBox  >
<mx:HBox >
<mx:Label text="Evento mouseOut:" />
<mx:Label id="idLabelAuxI" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseOver:" />
<mx:Label id="idLabelAuxII" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseDown:" />
<mx:Label id="idLabelAuxIII" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseUp:" />
<mx:Label id="idLabelAuxIV" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento click:" />
<mx:Label id="idLabelAuxV" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseMove:" />
<mx:Label id="idLabelAuxVI" text="0" color="0xFF0000" />
</mx:HBox>
<mx:Image id="idImagen" source="img/Dibujo.jpg"
mouseOut="idLabelAuxI.text = (int(idLabelAuxI.text)+1).toString()"
mouseOver="idLabelAuxII.text = (int(idLabelAuxII.text)+1).toString()"
mouseDown="idLabelAuxIII.text = (int(idLabelAuxIII.text)+1).toString()"
mouseUp="idLabelAuxIV.text = (int(idLabelAuxIV.text)+1).toString()"
click="idLabelAuxV.text = (int(idLabelAuxV.text)+1).toString()"
mouseMove="idLabelAuxVI.text = 'Mouse X: '+idImagen.mouseX +' Mouse Y: '+ idImagen.mouseY"
/>
</mx:VBox>
</mx:Application>

Ejemplo II, en MXML con AS 3.0:

Codigo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xFFFFFF"
creationComplete="init()">
<mx:Script>
<![CDATA[
private function init():void{
idImagen.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
idImagen.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
idImagen.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
idImagen.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
idImagen.addEventListener(MouseEvent.CLICK,mouseClickHandler);
idImagen.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
}
private function mouseOutHandler(e:MouseEvent):void{
idLabelAuxI.text = (int(idLabelAuxI.text)+1).toString();
}
private function mouseOverHandler(e:MouseEvent):void{
idLabelAuxII.text = (int(idLabelAuxII.text)+1).toString();
}
private function mouseDownHandler(e:MouseEvent):void{
idLabelAuxIII.text = (int(idLabelAuxIII.text)+1).toString();
}
private function mouseUpHandler(e:MouseEvent):void{
idLabelAuxIV.text = (int(idLabelAuxIV.text)+1).toString();
}
private function mouseClickHandler(e:MouseEvent):void{
idLabelAuxV.text = (int(idLabelAuxV.text)+1).toString();
}
private function mouseMoveHandler(e:MouseEvent):void{
idLabelAuxVI.text = 'Mouse X: '+idImagen.mouseX +' Mouse Y: '+ idImagen.mouseY;
}

]]>
</mx:Script>

<mx:VBox  >
<mx:HBox >
<mx:Label text="Evento mouseOut:" />
<mx:Label id="idLabelAuxI" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseOver:" />
<mx:Label id="idLabelAuxII" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseDown:" />
<mx:Label id="idLabelAuxIII" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseUp:" />
<mx:Label id="idLabelAuxIV" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento click:" />
<mx:Label id="idLabelAuxV" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseMove:" />
<mx:Label id="idLabelAuxVI" text="0" color="0xFF0000" />
</mx:HBox>
<mx:Image id="idImagen" source="img/Dibujo.jpg" />
</mx:VBox>
</mx:Application>

Los eventos no solo se aplican a las imágenes cada objeto o componente se le puede decir que dispare los eventos correspondientes a ellos, en otro tutorial veremos más eventos y en tutoriales de flex avanzado veremos cómo podemos crear nuestros propios eventos.
Saludos.

Descargar Archivos:

• ManejoDeEventos.mxml
• ManejoDeEventosII.mxml

Hola Mundo 2 - Flex 3

Ejemplo a Elaborar en MXML y en ActionScrip:

MXML:

AS:

En este tutorial haremos un hola mundo dinámico, que cuanto se haga clic en el botón se cambie el texto de un label y colocaremos HOLA MUNDO. El ejemplo lo vamos a hacer de dos maneras la primera en MXML y la segunda en MXML con AS 3.0 para ver las dos caras de la moneda.

Ejemplo I, escrito en MXML:

Codigo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:VBox width="100%" height="100%">
<mx:Label id="idLabel" text="Texto de Inicio"/>
<mx:Button label="Tutorial" click="{idLabel.text = 'Hola Mundo'}"/> 
</mx:VBox>
</mx:Application>

Ejemplo II, en MXML con AS 3.0:

Codigo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
<![CDATA[
private var contador:int = 0

private function clickHandler(e:MouseEvent):void{
idLabel.text = "Hola Mundo "+contador;
contador++;
}
]]>
</mx:Script>

<mx:VBox width="100%" height="100%">
<mx:Label id="idLabel" text="Texto de Inicio"/>
<mx:Button label="Tutorial" click="{clickHandler(event)}"/> 
</mx:VBox>

</mx:Application>

Con este tutorial ahora somos capaces de crear títulos que se generen dinámicamente cada ve que le demos a un botón que nosotros queramos, personalizando el texto en las ocasión que necesitemos.
Saludos.

Descargar Archivos:

• ButtonLabelFunction.mxml
• ButtonLabelFunctionII.mxml

Hola Mundo Flex 3

Ejemplo a Elaborar en MXML y en ActionScrip:

Flex, tiene la capacidad de poder interpretar dos tipos de códigos de programación, se pueden usar códigos netamente en ActionScript 3.0 o se puede trabajar en MXML para los amantes del tag.

Tanto en un lenguaje como en el otro se puede lograr los mismos resultados y si nos atascamos en algún lado siempre existe la posibilidad de combinar los 2 lenguajes de programación en un mismo archivo.


Veamos un ejemplo de cómo colocaríamos un Label y como texto del mismo colocaremos HOLA MUNDO tanto en MXML como usando AS 3.0 y MXML a la vez.

Video

El ejemplo es bastante básico pero para empezar a conocer los lenguajes están bastante bien:

Ejemplo I, solo MXML:

Codigo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hola Mundo" />
</mx:Application>

Ejemplo II, solo MXML con AS 3.0:

Codigo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init()">
<mx:Script>
<![CDATA[
private function init():void{
idLabel.text = "Hola Mundo 2";
}
]]>
</mx:Script>

<mx:Label id="idLabel" />
</mx:Application>

Listo ahora podremos colocar labels personalizados con textos a nuestra preferencia en el próximo tutorial colocaremos el texto en una función y cuando le demos clic a un botón el label se llenara.
Saludos.

Descargar Archivos:

• HolaMundoLabel.mxml
• HolaMundoLabelII.mxml