Trabajar con texto con Flash y actionscript

Hasta ahora no hemos visto en detalle como funcionan los campos de texto en Flash, y como leer y escribir en ellos cuando son dinámicos. Pero para empezar a jugar con las herramientas que hemos estado aprendiendo nos van a hacer falta, así que aquí os dejo un par de videos para abrir el apetito.

En el primero de estos dos videos os cuento como se crean textos en la interfaz de flash.
En el segundo, como cambiar el contenido de un texto dinámico y como leer lo que el usuario ha introducido en un campo de introducción de texto

Continue reading →

Ejemplos y ejercicios de bucles resueltos

Volver al Índice

He aquí las soluciones a los ejercicios planteados en el capítulo de bucles.

Importante: Leer código y entenderlo ayuda a aprender programación, pero no hay nada que ayude más que hacer los ejercicios por ti mismo/a, aunque cueste más trabajo.

  1. Escribir un bucle que muestre los números del 0 al 10 en la consola:
    [sourcecode language=»actionscript3″ padlinenumbers=»false» collapse=»false» light=»false» wraplines=»true» autolinks=»false» toolbar=»false»]
    for (var contador:int = 0; contador < 11; contador++ ) {
    trace(contador);
    }[/sourcecode]
  2. Escribir un bucle que muestre los números impares del 0 a 50 en la consola
    Solución corta:
    [sourcecode language=»actionscript3″ padlinenumbers=»false» collapse=»false» light=»false» wraplines=»true» autolinks=»false» toolbar=»false»]
    for (var i:int = 1; i < 50; i= i + 2 ) {
    trace(i);
    }[/sourcecode]

    Solución larga con condicional if:
    [sourcecode language=»actionscript3″ padlinenumbers=»false» collapse=»false» light=»false» wraplines=»true» autolinks=»false» toolbar=»false»]

    for (var i:int = 0; i < 50; i++ ) {
    if (i/2 != Math.floor(i/2)) {
    trace(i);
    }
    }[/sourcecode]

    La primera solución, obviamente, es más eficiente porque el bucle da la mitad de vueltas que en el segundo.

  3. Escribir un bucle que muestre los números del 50 al 70 en la consola
    [sourcecode language=»actionscript3″ padlinenumbers=»false» collapse=»false» light=»false» wraplines=»true» autolinks=»false» toolbar=»false»]
    for (var i:int = 50; i < 71; i++ ) {
    trace(i);
    }
    [/sourcecode]
  4. Escribir un bucle que coloque diez bolas en la escena en diagonal:

    Habiendo creado un símbolo que exportamos para as3 como la clase Pelota:
    [sourcecode language=»actionscript3″ padlinenumbers=»false» collapse=»false» light=»false» wraplines=»true» autolinks=»false» toolbar=»false»]
    var pelotas:Array = [];
    for (var i:int = 0; i < 10; i++ ) {
    pelotas[i] = new Pelota();
    pelotas[i].x = 20 + 30*i;
    pelotas[i].y = 20 + 20*i;
    addChild(pelotas[i]);
    }
    [/sourcecode]
    pelotasDiagonal
    Incluyo otra solución más eficiente, que puede que os líe un poco, pero que es la óptima en este caso, dado que en el ejercicio no se pide que se puedan modificar las propiedades de las pelotas una vez añadidas a la escena. En este caso no haría falta la creación de un array, que lo único que nos permite es poder acceder después de ejecutado el bucle a cada una de las instancias y cambiar, por ejemplo, sus coordenadas, su tamaño, etc. Como en este caso no es necesario, nos podemos ahorrar la memoria del Array; lo único que necesitamos es una variable (pelotaActual, por ejemplo) para poder referirnos a cada instancia dentro del bucle y colocarla en sus coordenadas y añadirla a la escena.

    Si os liais con esto, ignoradlo de momento:
    [sourcecode language=»actionscript3″ padlinenumbers=»false» collapse=»false» light=»false» wraplines=»true» autolinks=»false» toolbar=»false»]
    var pelotaActual:MovieClip;
    for (var i:int = 0; i < 10; i++ ) {
    pelotaActual = new Pelota();
    pelotaActual.x = 20 + 30*i;
    pelotaActual.y = 20 + 20*i;
    addChild(pelotaActual);
    }
    [/sourcecode]

  5. Crear un símbolo que contenga una pelota que en cada fotograma del 1 al 10 tenga dentro los números del 1 al 10.
    Añadir diez instancias del símbolo a la escena, pero cada uno mostrando un fotograma distinto:
    Necesitamos crear un símbolo con dos capas en su línea de tiempo parecido al siguiente:
    pelotasFotograma
    Después utilizaremos la técnica de seimpre para crear instancias desde el código (De nuevo, hemos exportado el símbolo para as3 como la clase Pelota:
    [sourcecode language=»actionscript3″ padlinenumbers=»false» collapse=»false» light=»false» wraplines=»true» autolinks=»false» toolbar=»false» highlight=»7″]
    var pelotas:Array = [];
    for (var i:int = 0; i < 10; i++ ) {
    pelotas[i] = new Pelota();
    addChild(pelotas[i]);
    pelotas[i].x = 20 + 30*i;
    pelotas[i].y = 200;
    pelotas[i].gotoAndStop(i+1);
    }
    [/sourcecode]
    Para pensar: Fijaos en que, en la línea siete, estamos usando la expresión i+1 para mandar cada pelota a su fotograma. ¿Por qué?
  6. Crear un símbolo que contenga 5 animaciones distintas en su línea de tiempo, de forma que cuando termine de reproducirse cada una de ellas, vuelva a empezar. Utilizar etiquetas para marcarlas. Si reproduzco alguna de las animaciones del símbolo con gotoAndPlay("animacion3") la animación 3 debe repetirse indefinidamente.
    Añadir 5 instancias de este símbolo a la escena, cada una reproduciendo indefinidamente cada una de las cinco animaciones definidas en la línea de tiempo de su símbolo.

    [gigya src=»https://dl.dropboxusercontent.com/u/3646945/newbeForever/esne/buclesAnimacioness.swf» width=»550″ height=»200″]

    Os dejo el .fla para que lo miréis
    buclesAnimaciones.fla

  7. A continuación incluyo una solución para la práctica que propuse en clase:
    Mostrar 10 pelotas en pantalla, botando de un lado a otro (bajo el efecto de la gravedad) y rebotando en el suelo, las paredes y el techo.
    En el enunciado daba una serie de pistas para que lo pudiérais hacer más fácilmente, incluyo aquí las más relevantes:

    • Las pelotas deben tener asociadas, cada una, una velocidad distinta y una aceleración distinta (tanto en el eje x como en el eje y)
    • En este ejercicio, la aceleración en el eje y tendrá para todas las pelotas el mismo valor (porque pretendemos simular la gravedad).
    • Esta asociación de las velocidades y aceleraciones con las pelotas se consigue metiendo las instancias de la pelota, las velocidades y las aceleraciones de cada una de ellas en Arrays “sincronizados”.
      Bucles_ejercicios_practica

    Este es el efecto que se buscaba:
    [gigya src=»https://dl.dropboxusercontent.com/u/3646945/newbeForever/esne/pelotasGravedad.swf» width=»600″ height=»400″]
    Y el código, suponiendo que tengais un símbolo exportado para actionscript con el nombre de clase Pelota, es:
    [sourcecode language=»actionscript3″ padlinenumbers=»false» collapse=»false» light=»false» wraplines=»true» autolinks=»false» toolbar=»false»]

    // Declaramos constantes por comodidad
    const NUM_PELOTAS:int = 10;
    const ANCHO_PANTALLA:int = stage.stageWidth;
    const ALTO_PANTALLA:int = stage.stageHeight;

    //Declaramos los arrays necesarios
    var pelotas:Array = [];
    var velocidadX:Array = [];
    var velocidadY:Array = [];
    var aceleracionX:Array = [];
    var aceleracionY:Array = [];

    // Bucle para crear las 10 pelotas, colocarlas en la escena darle valores iniciales
    // a las velocidades y aceleraciones de cada una.
    for (var i:int = 0 ; i < NUM_PELOTAS ; i++)
    {
    // Creamos una instancia de Pelota y la añadimos al elemento i de la lista
    pelotas[i] = new Pelota();
    pelotas[i].x = Math.random()*ANCHO_PANTALLA;
    pelotas[i].y = Math.random()*ALTO_PANTALLA;

    // añadimos la pelota a la lista de visualizacion de la escena
    addChild (pelotas[i]);

    // le asignamos sus velocidades y aceleraciones
    velocidadX[i] = Math.random()*10 -5;
    velocidadY[i] = Math.random()*10;
    aceleracionX[i] = 0;
    aceleracionY[i] = .5;

    // Como estamos utilizando el mismo contador para rellenar los elementos del todos
    // los arrays, estos quedan sincronizados.

    }

    // Función que se ssucribira al evento Event.ENTER_FRAME y se ejecutatá cada fotograma
    // para actualizar la la velocidad y la posición de las pelotas.
    function enCadaFotograma(evento:Event):void {

    for (var j:int = 0 ; j < NUM_PELOTAS ; j++)
    {
    //actualizamos la velocidad de cada pelota sumándole su aceleración
    velocidadX[j] = velocidadX[j] + aceleracionX [j];
    velocidadY[j] = velocidadY[j] + aceleracionY [j];
    //Actualizamos la posición de las pelotas
    pelotas[j].x = pelotas[j].x + velocidadX[j];
    pelotas[j].y = pelotas[j].y + velocidadY[j];

    //Comprobamos si choca con el suelo
    if( pelotas[j].y >= ALTO_PANTALLA – pelotas[j].height/2 ) {
    velocidadY[j] = – velocidadY[j];
    pelotas[j].y = ALTO_PANTALLA – pelotas[j].height/2;
    }

    //Comprobamos si choca con el techo
    if( pelotas[j].y <= 0 + pelotas[j].height/2) {
    velocidadY[j] = – velocidadY[j];
    pelotas[j].y = 0 + pelotas[j].height/2;
    }

    //Comprobamos si choca con la pared derecha
    if( pelotas[j].x >= ANCHO_PANTALLA – pelotas[j].width/2){
    velocidadX[j] = – velocidadX[j];
    pelotas[j].x = ANCHO_PANTALLA – pelotas[j].width/2;
    }

    //Comprobamos si choca con la pared derecha izquierda
    if( pelotas[j].x <= 0 + pelotas[j].width/2){
    velocidadX[j] = – velocidadX[j] ;
    pelotas[j].x =0 + pelotas[j].width/2;
    }
    }
    }
    // Suscribimos la función enCadaFotograma() al evento Event.ENTER_FRAME
    // que dispara la escena (stage) en cada fotograma
    stage.addEventListener(Event.ENTER_FRAME, enCadaFotograma);
    [/sourcecode]
    Descargar el .fla

  8. Este es uno de los ejemplos explicados en clase.
    Crea 30 instancias de un símbolo de la biblioteca que ha sido asociado con una clase de actionscript (a través del menú propiedades al que se llega haciendo click con el botón derecho sobre el símbolo en la biblioteca) y las coloca en la escena en posiciones aleatorias.
    Para que funcione, teneis que haber creado previamente un símbolo en la biblioteca que contenga una animación a vuestro gusto. Además deberéis exportarlo para actionscript (Aquí se supone que lo habéis hecho con el nombre de clase: AnimCirculo). Esto se hace haciendo click con el botón de recho del ratón sobre el símbolo de la biblioteca y eligiendo propiedades.

    [sourcecode language=»actionscript3″ wraplines=»false» padlinenumbers=»false» toolbar=»false» gutter=»true» autolinks=»false»]
    // Declaramos e inicializamos el array que va a contener las instancias de
    // nuestra animación
    var enjambre:Array = [];
    // Declaramos otro array para almacenar las posiciones de destino
    // de cada instancia
    var destinos:Array = [];
    // Éste es el número de elementos que queremos que tenga nuestro array. Lo
    // usaremos para limitar el numero de veces que se repite el bucle que
    // rellena el array.

    const NUM_ABEJAS:int = 30;
    const ANCHO_PANTALLA:int = stage.stageWidth;
    const ALTO_PANTALLA:int = stage.stageHeight;

    // Este es el bucle que rellena el array
    for (var i:int = 0 ; i &lt; NUM_ABEJAS ; i++ )
    {
    // rellenamos el elemento i del array con una nueva instancia AnimCirculo
    enjambre[i] = new AnimCirculo();
    // Fijamos aleatoriamente las coordenadas de la nueva instancia
    enjambre[i].x = Math.random() * ANCHO_PANTALLA;
    enjambre[i].y = Math.random() * ALTO_PANTALLA;
    // Y la añadimos a la lista de visualización de la escena.
    addChild(enjambre[i]);
    // Todas las instucciones anteriores se repiten tantas veces como hemos
    // fijado en la constante NUM_ABEJAS. En cada repetición consecutiva
    // el valor de i se aumentará en 1, luego enjambre[i] apuntará a un
    // elemento distinto del array enjambre.
    // Ahora también rellenamos el array de posiciones de destino
    // en cada paso del bucle
    destinos[i] = new Point( Math.random() * ANCHO_PANTALLA,
    Math.random() * ALTO_PANTALLA );
    }
    // Definimos una función que se ejecutará (ver más abajo) en cada frame
    // y que modifica la posición de cada instancia reduciendo la distancia
    // a su destino en una veinteava parte de la misma.
    // (utilizamos para ello la ecuación de frenado)
    function enCadaFrame(evento:Event):void
    {
    for (var j:int = 0 ; j < NUM_ABEJAS ; j++ )
    {
    // Utilizamos la ecuación de frenado para calcular la nueva posición
    // en cada fotograma, para cada instancia
    enjambre[j].x = enjambre[j].x + (destinos[j].x – enjambre[j].x)/20;
    enjambre[j].y = enjambre[j].y + (destinos[j].y – enjambre[j].y)/20;
    }
    }

    // Por último suscribimos la función enCadaFrame() al evento que dispara la
    // escena (stage) en cada fotograma
    stage.addEventListener(Event.ENTER_FRAME, enCadaFrame);

    [/sourcecode]

    y el resultado debería ser éste:
    [gigya src=»https://dl.dropboxusercontent.com/u/3646945/newbeForever/esne/enjambre01.swf» width=»550″ height=»400″]

Volver al Índice

Eventos de ratón y teclado

Los eventos son los que hacen cualquier programa interactivo funcionar. Sin ellos no hay interacción con el usuario, pero tampoco con el sistema operativo, o la red. El programación, sin ellos hay muy poco que hacer.

De hecho, os habréis fijado que aunque aún no hemos dedicado ningún capítulo a ellos, hemos estado usando eentos en casi todos nuestros ejemplos, bien para detectar el paso del tiempo (detectando cada vez que se pinta un fotograma), bien para detectar un click del ratón. Nigun programa se puede llamar interactivo sin ellos.

ActionScript posee un sistema de eventos similar al de javascript y otros lenguajes, y aunque hay algunos otros sistemas diferentes, si entendemos este, seremos capaces de entender todos los demás sin problema.

Así pues, presten atención, porque en este capítulo vamos a tratar con uno de los temas más importantes del curso.
Continue reading →

Funciones

Hasta ahora hemos visto como realizar unas cuantas tareas con nuestro código, lo cual significa que ya tenemos una razonablemente extensa batería de herramientas que podemos reutilizar en diferentes programas.

Ahora bien, cada vez que queramos hacer un corta-pega en otro programa tendremos que cambiar un montón de cosas, como definiciones de variables, valores, y a veces el orden en el que se hacen las cosas, etc. Es habitual equivocarse haciendo esto y a veces puede llevar bastante tiempo encontrar el error, aunque es más fácil que volver a escribir todo el código desde el principio.

Pero, en realidad, sería mucho más cómodo encontrar un método para sustituir todo este proceso por un simple corta pega.

Este método existe y programación se denomina encapsular el conocimiento. Hay varios métodos para realizarlo, pero hoy nos vamos a ocupar del más sencillo de ellos, la utilización de funciones.
Las funciones nos van servir para escribir código que se entiende mejor, que ahorra repeticiones innecesarias, y que permite reaprovechar gran parte del código que escribamos en otros programas.
Continue reading →

Algunas operaciones matemáticas comunes con AS3

En este capítulo veremos como realizar algunas operaciones matemáticas que se utilizan mucho en programación.

Sólo incluiré aquí las fórmulas, el razonamiento o el esqueleto de la técnica para el cálculo; la mayoría de los códigos mostrados no son programas completos que se puedan compilar directamente.

Continue reading →

Bucles

Volver al ͍ndice

Es muy habitual realizar taréas repetitivas en nuestro código. Sin embargo, escribirlas línea a línea es tan ineficiente como tedioso, además de confuso y difícil de modificar sin cometer errores tipográfficos.
Para evitar este tedio y hacernos la vida mucho más fácil están los bucles.
Hay varios tipos de ellos, pero por simplicidad y porque son los más fáciles de entender y manejar, nos vamos a centrar en los bucles for.
Continue reading →

Ejemplos arrays y bucles

Volver al índice

Este es uno de los ejemplos explicados en clase. Crea 30 instancias de un símbolo de la biblioteca que ha sido asociado con una clase de actionscript (a través del menú propiedades al que se llega haciendo click con el botón derecho sobre el símbolo en la biblioteca) y las coloca en la escena en posiciones aleatorias.
Continue reading →