-
-
-
RECUPERANDO INFORMACIÓN INTRODUCIDA POR EL USUARIO
01. Creamos un archivo y lo llamamos formulario.fla.
02. Añadimos cuatro capas: acciones, botón, textos y campos.
03. Creamos un botón con sus estados y los instanciamos en el escenario, y en la capa botón, con el nombre "send_b".
04. En la capa textos introducimos dos textos estáticos descriptivos de los datos que vamos a recuperar. En nuestro caso "Nombre" y "Correo".
05. En la capa campos creamos dos textos del tipo "Input Text" o "Introducción de Texto". Les damos como nombre de instancia "name_txt" y "mail_txt" respectivamente.
06. En la capa acciones y en un frame y a través de la ventana acciones introducimos la programación:
07. Añadimos un evento de ratón a nuestro botón en el escenario y le decimos que se ejecute la función recuperarInputs cuando tenga lugar el evento click.
09. Definimos la función recuperarInputs que se ejecutará en el click del botón y añadimos dentro de la función un trazado para confirmar que se ejecuta.
10. Para recuperar la información introducida por el usuario utilizamos la propiedad text. Por ejemplo: name_txt.text recuperará lo introducido por el usuario en el campo de texto name_txt.
//---------------------------- DESCARGA---------------------------
http://www.tresrazones.com/as3/formulario.rar
//---------------------------- DESCARGA---------------------------
//---------------------------- CÓDIGO---------------------------
send_b.addEventListener(MouseEvent.CLICK,recuperarInputs);
function recuperarInputs(ev:Event){
trace(name_txt.text);
trace("");
trace(mail_txt.text);
trace("");
}
//---------------------------- CÓDIGO--------------------------- -
REPRODUCIENDO VARIOS CLIPS
01. Creamos un archivo y lo llamamos playClips.fla.
02. Creamos un símbolo de tipo movieclip en el que creamos dos capas: acciones y animación.
03. En la capa acciones, y en el primer frame, introduces un stop(). Esto detendrá el movieclip al cargarlo y no reproducirá la animación hasta que haya una intervención por parte del usuario.
04. En la capa animación generas la animación que quieras.
05. Instanciamos el movieclip con el nombre "clip01_mc" en una capa de la escena principal llamada clips.
06. Repetimos el proceso (2-5) tantas veces como clips diferentes necesitemos. Imagina que son tres: "clip01_mc", "clip02_mc" y "clip03_mc".
07. Creamos tres símbolos de tipo botón y mostramos en cada uno de ellos un texto descriptivo del clip que reproducirá. Instanciamos cada uno de ellos y los llamamos "clip01_b", "clip02_b" y "clip03_b" en una capa llamada botones, también en la escena principal.
08. Añadimos una capa nueva y en un frame y a través de la ventana acciones introducimos la programación:
09. Añadimos eventos de ratón a nuestros botones en el escenario y le decimos que se ejecute una función para cada uno cuando tenga lugar el evento click. Las funciones serán: playClip01, playClip02 y playClip03.
10. Definimos cada una de las funciones que se ejecutará en el click sobre nuestros botones y hacemos que se reproduzca el clip correspondiente. Una vez que se ejecuta la animación el clip se quedará parado en el primer frame gracias al stop() que introdujimos...
//---------------------------- CÓDIGO---------------------------
clip01_b.addEventListener(MouseEvent.CLICK, playClip01);
clip02_b.addEventListener(MouseEvent.CLICK, playClip02);
clip03_b.addEventListener(MouseEvent.CLICK, playClip03);
function playClip01(ev:MouseEvent):void{
clip01_mc.play();
}
function playClip02(ev:MouseEvent):void{
clip02_mc.play();
}
function playClip03(ev:MouseEvent):void{
clip03_mc.play();
}
stop();
//---------------------------- CÓDIGO--------------------------- -
TRABAJANDO CON VARIOS AUDIOS
01. Creamos un archivo y lo llamamos audioReproductor.fla.
02. Importamos los sonidos. Comando + R o menú Archivo / Importar / Importar a escenario...
03. Creamos un símbolo de tipo movieclip en el que creamos cuatro capas: acciones, etiquetas, audios y cartelas.
04. En la capa acciones, y en el primer frame, introduces un stop(); Esto detendrá el movieclip al cargarlo y no reproducirá ningún audio hasta que haya una intervención por parte del usuario.
05. Seleccionas el siguiente frame o fotograma de la capa de etiquetas. Le pones un nombre descriptivo a su etiqueta en el panel propiedades. Mis etiquetas son: "dog", "door", "crash" y "steps". En la capa cartela creas el texto descriptivo o la ilustración que quieras que se vea mientras se reproduce el audio.
06. Seleccionas el mismo frame de la capa de sonido y en panel Propiedades del fotograma vas al grupo Sonido. En el combo Nombre eliges el archivo que quieres que se reproduzca. Opciones a elegir son Efecto: Ninguno; Sinc: Flujo y Repetir x 1. Abres la línea de tiempo hasta que veas que se acaba la representación gráfica del sonido. Entonces, y en la capa acciones, introduces un stop();
07. Repetimos el proceso tantas veces como audios quieras reproducir. En el ejemplo son cuatro audios.
08. Instanciamos el movieclip con el nombre "audios_mc" en una capa llamada audios.
09. Creamos cuatro símbolos de tipo botón y mostramos en cada uno de ellos un texto descriptivo del audio que reproducirá. Instanciamos cada uno de ellos y los llamamos "perro_b", "puerta_b", "cristal_b" y "pasos_b" en una capa llamada botones.
10. Añadimos una capa nueva y en un frame y a través de la ventana acciones introducimos la programación:
08. Añadimos eventos de ratón a nuestros botones en el escenario y le decimos que se ejecute una función para cada uno cuando tenga lugar el evento click. Las funciones serán: suenaPerro, suenaPuerta, suenaCristal y suenaPasos.
09. Definimos cada una de las funciones que se ejecutará en el click sobre nuestros botones y hacemos que nuestro movieclip se reproduzca desde la etiqueta correspondiente a cada audio. Una vez que ser reproduce se para gracias al stop() que introdujimos...
//---------------------------- DESCARGA---------------------------
http://www.tresrazones.com/as3/audioReproductor.rar
//---------------------------- DESCARGA---------------------------
//---------------------------- CÓDIGO---------------------------
perro_b.addEventListener(MouseEvent.CLICK, suenaPerro);
puerta_b.addEventListener(MouseEvent.CLICK, suenaPuerta);
cristal_b.addEventListener(MouseEvent.CLICK, suenaCristal);
pasos_b.addEventListener(MouseEvent.CLICK, suenaPasos);
function suenaPerro(ev:MouseEvent):void{
audios_mc.gotoAndPlay("dog");
}
function suenaPuerta(ev:MouseEvent):void{
audios_mc.gotoAndPlay("door");
}
function suenaCristal(ev:MouseEvent):void{
audios_mc.gotoAndPlay("crash");
}
function suenaPasos(ev:MouseEvent):void{
audios_mc.gotoAndPlay("steps");
}
stop();
//---------------------------- CÓDIGO--------------------------- -
CREANDO BOTONERAS ACTIVAS
01. Creamos un archivo y lo llamamos botonera.fla. En él creamos un símbolo de tipo botón con cuatro estados. El último, el frame que define el área sensible, lo utilizaremos para dibujar también el estado inactivo o pulsado.
02. Instanciamos el botón cuatro veces y esas instancias las distribuimos por el escenario llamándolas "boton01","boton02", "boton03" y "boton04". Las situamos en una capa que llamamos "botones activos".
03. Instanciamos el botón como un gráfico y hacemos que se reproduzca como un fotograma estático (ventana propiedades) en el frame 4 (nuestro estado inactivo o pulsado). Duplicamos hasta cuatro veces y esas instancias las distribuimos por el escenario de forma que si ocultamos el botón se vean como si el botón estuviese clicado. Las situamos en una capa por debajo de la anterior que llamamos "botones estáticos".
04. Creamos cuatro símbolos de tipo movieClip a modo de cartelas e ilustramos cada uno con un número del 1 al 4. Instanciamos cada uno de ellos y los llamamos "numero01", "numero02", "numero03" y "numero04".
05. Añadimos una capa nueva y en un frame y a través de la ventana acciones introducimos la programación:
06. Creamos una variable que llamamos botonera que contendrá nuestro Array de botones. Para introducir esos datos lo hacemos al crear la variable en el comando new. Los metemos entre sus paréntesis. new Array (boton01,boton02,boton03,boton04);
07. Creamos una variable que llamamos numeros que contendrá nuestro Array de cartelas. Para introducir esos datos lo hacemos al crear la variable en el comando new. Los metemos entre sus paréntesis. new Array (numero01,numero02,numero03,numero04);
08. Añadimos eventos de ratón a nuestros botones en el escenario y le decimos que se ejecute una función para cada uno cuando tenga lugar el evento click. Las funciones serán: boton1Click, boton2Click, boton3Click y boton4Click.
09. Definimos cada una de las funciones que se ejecutará en el click sobre nuestros botones y llámamos a la función actualizaBotonera pasándole como parámetro el número que identifica al botón en el array botonera.
10. Creamos la función actualizaBotonera que espera un número como parámetro. En ella añadimos un bucle que recorrerá el array botonera desde su campo 0 hasta su último campo (botonera.length).
11. En el interior del bucle introducimos un condicional para ocultar el botón clicado (se verá el botón "estático" que hemos colocado debajo) y situar visible la cartela que muestra el número del botón. Al mismo tiempo mostramos todos los botones no clicados y reseteamos la situación de sus cartelas.
//---------------------------- DESCARGA---------------------------
http://www.tresrazones.com/as3/botonera.rar
//---------------------------- DESCARGA---------------------------
//---------------------------- CÓDIGO---------------------------
var botonera:Array=new Array (boton01,boton02,boton03,boton04);
var numeros:Array=new Array (numero01,numero02,numero03,numero04);
boton01.addEventListener(MouseEvent.CLICK,boton1Click);
boton02.addEventListener(MouseEvent.CLICK,boton2Click);
boton03.addEventListener(MouseEvent.CLICK,boton3Click);
boton04.addEventListener(MouseEvent.CLICK,boton4Click);
function boton1Click(e:MouseEvent):void{
actualizaBotonera (0);
}
function boton2Click(e:MouseEvent):void{
actualizaBotonera (1);
}
function boton3Click(e:MouseEvent):void{
actualizaBotonera (2);
}
function boton4Click(e:MouseEvent):void{
actualizaBotonera (3);
}
function actualizaBotonera (id:Number):void{
for(var i=0; i<botonera.length; i++){
if(id==i){
botonera[i].visible=false;
numeros[i].y=15;
} else{
botonera[i].visible=true;
numeros[i].y=130;
}
}
}
//---------------------------- CÓDIGO--------------------------- -
TRABAJANDO CON VARIABLES DE TIPO ARRAY
Un Array (matriz) es una variable que contiene muchos campos en su interior, cada uno con un dato diferente. Cada dato en el Array se identifica con un número desde el 0 hasta el último dato. De esta forma podemos recuperar cada dato del Array refiriéndonos a él con la forma nombreArray[número].
Este tipo de variable es muy útil en combinación con el bucle for porque nos permite recorrer su contenido. Lo vemos en el ejemplo...
01. Creamos un archivo y lo llamamos arrayBotones.fla. En él creamos un botón con cuatro estados.
02. Instanciamos el botón cuatro veces y esas instancias las distribuimos por el escenario llamándolas "boton01","boton02", "boton03" y "boton04".
03. Añadimos una capa nueva y en un frame y a través de la ventana acciones introducimos la programación:
04. Creamos una variable que llamamos botonera que contendrá nuestro Array de botones. Para introducir esos datos (los botones, en este caso) hay varias posibilidades:
- Pasárselos al crearlo en el comando new. Los metemos entre sus paréntesis.
new Array(valor,valor,valor...)
- Utilizar, una vez creado el Array, la función push. En el ejemplo esta posibilidad está comentada, entre /* y */, por lo que estas instrucciones no estarán activas para el programa.
nombreArray.push(valor)
- Dar el valor a cada campo o slot. En el ejemplo esta posibilidad está comentada, entre /* y */, por lo que estas instrucciones no estarán activas para el programa.
nombreArray[número]=valor
05. Añadimos un bucle que recorrerá el array desde su campo 0 hasta su último campo (nombreArray.length). En el interior del bucle trazamos el nombre del botón que ocupa cada campo o slot.
//---------------------------- DESCARGA---------------------------
http://www.tresrazones.com/as3/arrayBotones.rar
//---------------------------- DESCARGA---------------------------
//---------------------------- CÓDIGO---------------------------
var botonera:Array=new Array (boton01,boton02,boton03,boton04);
/*var botonera:Array=new Array ();
botonera.push(boton01);
botonera.push(boton02);
botonera.push(boton03);
botonera.push(boton04);*/
/*var botonera:Array=new Array();
botonera[0]=boton01;
botonera[1]=boton02;
botonera[2]=boton03;
botonera[3]=boton04;*/
for (var i=0; i<botonera.length; i++) {
trace(botonera[i].name);
}
//---------------------------- CÓDIGO--------------------------- -
"Cualquiera que siga a DC con un mínimo interés, sabe ya que cuando hay que matar a algún personaje, el primer candidato siempre es Flash. Así que ya no sorprende para nada ver en las estanterías de las tiendas de cómics un título como éste: La muerte de Flash; título que Planeta se ha sacado de la manga para agrupar las historias que recogieron los números..."
¡Encontrado en internet! y dedicado a los que gustan de paralelismos. -
CARGANDO UNA PELÍCULA EXTERNA (SWF)
01. Creamos un archivo y lo llamamos scene.fla. En él dibujamos un círculo rojo o un elemento gráfico llamativo. Exportamos.
02. Creamos un nuevo archivo al que llamamos main.fla. Añadimos una capa nueva y en un frame y a través de la ventana acciones introducimos la programación:
03. Creamos un objeto loader (instanciamos la clase que utiliza Flash para cargar SWF o JPG externos) que llamamos cargador.
04. Añadimos un evento al contenido del objeto loader para saber cuando se ha cargado: le decimos que ejecute la función swfCargado cuando tenga lugar el evento complete (completado).
05. Indicamos al objeto loader lo que queremos cargar en él (el swf). Lo hacemos a través de la clase URLRequest y dándole ruta y nombre como parámetros.
06. Definimos la función swfCargado que se ejecutará cuando se complete la carga. En ella añadimos al escenario el objeto cargado con la función addChild.
//---------------------------- CÓDIGO---------------------------
var cargador:Loader = new Loader();
cargador.contentLoaderInfo.addEventListener(Event.COMPLETE,swfCargado);
cargador.load(new URLRequest("scene.swf"));
function swfCargado(event:Event):void {
addChild(cargador);
}
//---------------------------- CÓDIGO--------------------------- -
CHEQUEANDO EL CONTACTO ENTRE DOS MOVIECLIPS.
¡Incluye link de descarga!
01. Creamos un MovieClip o clip de película y lo instanciamos en el escenario con el nombre "raton_mc".
02. Creamos un MovieClip o clip de película que sirva de objetivo para el contacto y lo instanciamos con el nombre de "hit_mc" (en forma de cruz)
03. Creamos una capa nueva y en un frame y a través de la ventana acciones introducimos la programación:
04. Añadimos el primer evento de ratón a nuestro clip en el escenario: le decimos que ejecute la función botonDown cuando tenga lugar el evento down (pulsar).
05. Añadimos el segundo evento de ratón a nuestro clip: le decimos que ejecute la función botonUp cuando tenga lugar el evento up (soltar).
06. Definimos la función botonDown que se ejecutará al pulsar sobre el clip y en ella iniciamos la función que arrastrará el clip: startDrag().
07. Definimos la función botonUp que se ejecutará al soltar sobre el clip una vez pulsado y en ella llamamos a la función que detendrá e arrastre del clip: stopDrag().
08. También en esa función introducimos un condicional para saber si el primer objeto hace hit (contacto) con el otro objeto. En caso afirmativo situamos en la misma posición ambos objetos. Hacemos coincidir sus x y sus y.
09. Si fuese un proyecto AS3 deberíamos importar la librería de eventos que necesitamos (import flash.events.MouseEvent;) y la clase MovieClip (import flash.display.MovieClip;).
//---------------------------- DESCARGA---------------------------
http://www.tresrazones.com/as3/colocaSilueta.rar
//---------------------------- DESCARGA---------------------------
//---------------------------- CÓDIGO---------------------------
raton_mc.addEventListener(MouseEvent.MOUSE_DOWN, botonDown);
raton_mc.addEventListener(MouseEvent.MOUSE_UP, botonUp);
function botonDown(event:MouseEvent):void {
raton_mc.startDrag();
}
function botonUp(event:MouseEvent):void {
raton_mc.stopDrag();
if (raton_mc.hitTestObject(hit_mc)) {
raton_mc.x=hit_mc.x;
raton_mc.y=hit_mc.y;
}
}
//---------------------------- CÓDIGO--------------------------- -
ARRASTRANDO UN MOVICLIP
01. Creamos un MovieClip o clip de película y lo instanciamos en el escenario con el nombre "raton_mc".
02. Creamos una capa nueva y en un frame y a través de la ventana acciones introducimos la programación:
03. Añadimos el primer evento de ratón a nuestro clip en el escenario: le decimos que ejecute la función botonDown cuando tenga lugar el evento down (pulsar).
04. Añadimos el segundo evento de ratón a nuestro clip: le decimos que ejecute la función botonUp cuando tenga lugar el evento up (soltar).
05. Definimos la función botonDown que se ejecutará al pulsar sobre el clip y en ella iniciamos la función que arrastrará el clip: startDrag().
06. Definimos la función botonUp que se ejecutará al soltar sobre el clip una vez pulsado y en ella llamamos a la función que detendrá e arrastre del clip: stopDrag().
07. Si fuese un proyecto AS3 deberíamos importar la librería de eventos que necesitamos (import flash.events.MouseEvent;) y la clase MovieClip (import flash.display.MovieClip;).
//---------------------------- CÓDIGO---------------------------
raton_mc.addEventListener(MouseEvent.MOUSE_DOWN, botonDown);
raton_mc.addEventListener(MouseEvent.MOUSE_UP, botonUp);
function botonDown(event:MouseEvent):void {
raton_mc.startDrag();
}
function botonUp(event:MouseEvent):void {
raton_mc.stopDrag();
}
//---------------------------- CÓDIGO--------------------------- -
HACIENDO QUE UN BOTÓN LLAME A UNA URL
01. Creamos un boton con sus estados y los instanciamos en el escenario con el nombre "boton_verde".
02. Creamos una capa nueva y en un frame y a través de la ventana acciones introducimos la programación:
03. Creamos la variable request para hacer la petición URL en la que pasamos la dirección de la web que queremos abrir.
04. Añadimos eventos de ratón a nuestro botón en el escenario y le decimos que ejecute la función botonClick cuando tenga lugar el evento click.
05. Definimos la función botonClick que se ejecutará en el click del botón y llámamos al método navigateToURL pasándole la dirección URL que queremos abrir.
06. Si fuese un proyecto AS3 deberíamos importar la librería de eventos que necesitamos (import flash.events.MouseEvent;) y las librerías necesarias para abrir la página web (import flash.net.navigateToURL;import flash.net.URLRequest;)
//---------------------------- CÓDIGO---------------------------
var request:URLRequest = new URLRequest("nuestra_página_web");
boton_verde.addEventListener(MouseEvent.CLICK, botonClick);
function botonClick(event:MouseEvent):void {
navigateToURL(request, '_blank')
}
//---------------------------- CÓDIGO--------------------------- -
AÑADIENDO FUNCIONALIDAD A UN BOTÓN
01. Creamos un botón con sus estados y los instanciamos en el escenario con el nombre "boton_verde".
02. Creamos una capa nueva y en un frame y a través de la ventana acciones introducimos la programación:
03. Añadimos eventos de ratón a nuestro botón en el escenario y le decimos que ejecute la función botonClick cuando tenga lugar el evento click.
04. Definimos la función botonClick que se ejecutará en el click del botón y añadimos dentro de la función un trazado para confirmar que se ejecuta.
05. Si fuese un proyecto AS3 deberíamos importar la librería de eventos que necesitamos (import flash.events.MouseEvent;)
//---------------------------- CÓDIGO---------------------------
boton_verde.addEventListener(MouseEvent.CLICK, botonClick);
function botonClick(event:MouseEvent):void {
trace("MOUSE CLICKED");
}
//---------------------------- CÓDIGO--------------------------- -
http://wiki.developers.facebook.com/index.php/Fb:swf
En páginas de perfil, una imagen aparece primero. Cuando el usuario clica la imagen, ésta se sustituye por el objeto flash. En páginas canvas, la imagen es ignorada, y el objeto flash se incluye directamente.
Espero que te sirva. Y que funcione... -
Pienso que no hay que tener miedo a reciclarse. De hecho, hay que tomárselo como un aliciente: aprender cosas nuevas, enfrentarse a proyectos más ambiciosos, ponerse a prueba... Otra cosa, y no sé si te refieres a eso, es que nos obliguen a utilizar herramientas antes de que existan y sin saber si van a ser realmente potentes y eficaces. Yo, personalemente, pienso seguir utilizando Flash mientras no VEA una herramienta mejor en el mercado.
En todo caso, con el HTML5, se discute Flash como herramienta universal para la animación en Web. ¿Es ése su único ámbito? ¿Incluso en la Web, tendrá un sustituto de garantías en todas sus aplicaciones?
http://www.betybyte.com/index.php/2010/05/adios-a-flash-carta-abierta-de-un-disenador/ -
También hay periodistas que publican, hablando de HTML5, que "La etiqueta canvas es lo más interesante, permitirá crear animaciones interactivas y dibujar directamente en el ordenador". Claro, hasta ahora no lo podíamos hacer... sólo podíamos dibujar en cuevas.
-
Creado especialmente para mis alumnos del Máster Universitario de Diseño Gráfico de la Comunicación. Me llamo Juan Ramos y tengo más de diez años de experiencia de trabajo en Flash. Diez años "mágicos" que quiero compartir contigo. Espero tus preguntas...
-
tresRazones’s Bio
“El corazón tiene razones que la razón no entiende” (Blaise Pascal). Juan Ramos pone en marcha su proyecto tresRazones con un canto al idealismo, a la fantasía y a los retos.
