Hola amigos!! estoy devuelta con este post relacionado a Adobe flash Player CSS
bueno comenzaremos con el tutorial
Durante las últimas semanas hemos estado viendo las diferentes animaciones que se pueden hacer en Adobe Flash CS5, y con las cuales ya podemos ir haciendo desde banners animados, hasta interactivos. Pero la potencia de Adobe Flash CS5 radica en su lenguage de programación, el cual desde su versión 2, es Orientado a Objetos. Por lo que vamos a iniciar una serie de tutoriales en los cuales vamos a iniciarnos en la programación orientada a objetos de ActionsScript 3.0. Aquellos que ya tengáis nociones de programación orientada a objetos a lo mejor esta serie de tutoriales os parece un poco lenta pero seguro que descubris cosas nuevas.
Lo primero es explicar de forma rápida y sencilla que es la programación orientada a objetos, la cual a partir de ahora la llamaremos OOP (del inglés Oriented Object Programing). La OOP es una forma de programar aplicaciones informáticas que utiliza objetos y sus interacciones. Las principales características de esta forma de programar son la herencia, el polimorfismo, abstracción y encapsulación. Si queréis profundizar en dichas carcaterísticas, os recomiendo que le echéis un vistazo a la wikipedia. Los objetos se definen como clases y estos a su vez tienen métodos y propiedades, con los cuales podemos trabajar e interactuar. Pero nada mejor que un ejemplo para mostrar todo esto.
Ejemplo: Imaginemos que queremos hacer un juego en el cual tenemos un coche y lo tenemos que conducir por un circuito. Si quisiéramos realizar dicho juego en ActionScript 3.0, tendríamos que utilizar OOP ya que si lo hiciéramos todo en la linea de tiempo, repetiríamos mucho código y se haría muy tedioso corregir cualquier cosa. Pues bien, para este ejemplo, uno de nuestros objetos sería el coche y otro objeto podría ser el circuito.
Para definir el objeto lo hacemos así:
Como podéis ver, hemos definido nuestro primer objeto en una clase de ActionScript. Vamos a verla poco a poco.
En primer lugar lo que hacemos es definir la clase (el objeto) y se hace con la palabra class seguido del nombre que queremos darle, en nuestro caso Coche. Seguidamente se define el constructor de la clase. El constructor es un método de la clase pero un poco especial, ya que es que el define al objeto, si no tenemos constructor no podemos crear un objeto. En ActionScript el constructor se define poniéndole el mismo nombre que a la clase, de esta forma Adobe Flash sabe que ese método es el constructor. A continuación definimos las propiedades del objeto, en nuestro caso hemos definido dos: _velocidad y _direccion y finalmente definimos los métodos, nosotros solamente hemos definido uno: Conducir.
La sintaxis de ActionScript es muy sencilla, es decir, la forma en la que se definen las clases, las propiedades y los métodos pero si queréis profundizar un poco más.
Como podéis ver, después del nombre de las propiedades de la clase y tras los dos puntos, aparece una palabra (Number, String), estos son los tipos de las propiedades. ActionScript define diferentes tipos, entre los cuales se encuentran los siguientes:
String: es el tipo para las cadenas de texto
Number: es el tipo para los números, sean con decimales o sin ellos.
Array: es el tipo para las colecciones de datos
Aquí tenéis el resto de tipos que acepta.
De la misma forma, los métodos tienen un tipo y este tipo va relacionado con el valor que devuelven. Por ejemplo, si tenemos un método que nos calcula la raiz cuadrada de un número, el tipo del método debe ser Number.
También vemos que los métodos pueden recibir parámetros (direccion), esto puede ser muy útil por ejemplo si necesitamos hacer algo dentro del método con información que no tenemos dentro del propio método. Volviendo al ejemplo anterior, si tenemos un método que calcula la raíz cuadrada de un número y queremos ser nosotros los que decidimos que número ha de ser, entonces definimos un parámetro en el método que será de tipo Number :
Como vemos en el ejemplo, el método recibe un parámetro, que indica a qué número se le debe calcular la raiz cuadrada, dentro del método define una nueva variable de nombre resultado y despues le asigna el resultado de la operación Math.sqrt que es la función que hace el cálculo de la raiz cuadrada y finalmente devuelve el resultado.
Ahora ya sabemos como definir una clase. En Adobe Flash CS5, las clases se definen en archivos separados del archivo fla, los cuales llevan como extensión as (de ActionScript). Vamos a crear nuestra primera clase en ActionScript. Abrimos el Adobe Flash CS5 y seleccionamos “Crean nueva clase de ActionScript 3″, nos solicitará un nombre, introducimos Coche y pulsamos Aceptar.
Una vez pulsemos en Aceptar, nos aparecerá la clase, ya con el constructor creado por lo que solo tendremos que crear los métodos y las propiedades y si fuera necesario, modificar el constructor. Insertamos las priedades y el método, de tal forma que nuestra clase se quede como la imagen siguiente:
de esta forma tenemos nuestra clase creada en ActionScript con Adobe Flash CS5. En el siguiente tutorial veremos como interactuar con la clase desde el escenario de Flash y como acceder a algunas propiedades de los clip de película desde ActionScript 3.
En el anterior tutorial vimos como crear nuestra primera clase y los diferentes tipos de datos que puede contener nuestra clase. En este tutorial, vamos a ver como interactuar entre el escenario y la clase. Para ello, vamos a utilizar nuestra clase Coche que hicimos en el anterior tutorial el paso I.
Abrimos el Adobe flash CS5 y creamos un nuevo archivo de ActionScript 3.0. Ahora guardamos el archivo (aunque no tenga nada en el escenario) en la misma carpeta donde tenemos el archivo Coche.as. En nuestro caso, le hemos puesto tutorial.fla.
Ahora vamos a configurar nuestro archivo de Flash para que pueda interactuar sin problemas con la clase. Para ello vamos a Archivo -> Configuración de Publicación
En esta ventana, nos aparecen todas las opciones de publicación de las que disponemos y sus configuraciones. Cuantas más opciones marquemos, mas pestañas nos aparecerán. En nuestro caso solo nos interesa tener marcada, por ahora, la opción de Flash y HTML. Ahora vamos a la pestaña Flash y pulsamos sobre el botón de Configuración que hay al lado del desplegable de Script:
Una vez pulsado el botón de Configuración, se nos abrirá otra ventana, donde podremos configurar diferentes parámetros de ActionScript.
En esta ventana tenemos diferentes opciones de configuración. Vamos a verlas por separado:
Clase del documento: en este campo es donde le indicamos al archivo cual va a ser la clase por defecto del documento, es decir, cual va a ser la clase que va a controlar el documento y desde la que vamos a poder acceder a cualquier elemento del escritorio directamente por su nombre de instancia.
Exportar clases en fotograma: aquí le indicamos en que fotograma queremos que carguen nuestras clases. Flash cuando le damos a publicar, genera un único archivo el cual contiene tanto las imágenes, como las clases, videos, audio, etc. Aquí le indicamos en que fotograma del archivo fla queremos que incluya las clases. Por defecto aparece el 1 para que desde el principio, la clase pueda ser utilizada.
Errores: indica como queremos que se nos muestren los errores de ActionScript y como de estricto queremos que sea con nuestro lenguaje.
Escenario: indica si queremos que Flash declare el escenari0 en una variable a la cual podemos acceder desde nuestra clase.
Dialecto: nos permite escoger la forma de escribir el código ActionScript.
Las tres pestañas inferiores son para indicarle al Flash donde tiene que buscar el resto de clases (Ruta de Origen), donde tiene que buscar los elementos de la Biblioteca (Ruta de Biblioteca) y si queremos declarar constantes (Constantes de configuración).
Para nuestro tutorial y en el nivel de programación que nos encontramos, únicamente vamos a tocar el campo de Clase de documento para indicarle al Flash que clase es la que gestionar el archivo Flash. Para ello, pulsamos sobre el boton y nos aparecerá una ventana donde nos pide que insertemos el nombre de la clase:
En el campo “Nombre de clase” indicamos el nombre de la clase, en nuestro caso será Coche y sin extensión. Pulsamos el botón de Aceptar y si hemos guardado el archivo en el mismo sitio que el archivo Coche.as, automáticamente nos abrirá dicho archivo para que podamos trabajar con él. Cerramos la ventana de Configuracion Avanzada de ActionScript 3.0 pulsando el botón Aceptar y cerramos la ventana de Configuración de publicación pulsando Aceptar. Ahora ya tenemos vinculado tanto el archivo fla como la clase y desde la propia clase podemos acceder a todo lo que haya en el escenario.
Vamos hacer una prueba. Para ello, creamos una figura en el escenario y la convertimos en Clip de Película y como nombre de instancia le ponemos mc_figura (a partir de ahora cuando creemos un clip de película, en su nombre de instancia siempre empezará por mc de Moviclip para así poder saber a que hacemos referencia desde la clase).
Ahora vamos a la clase Coche.as y la dejamos como sigue:
Vamos a ver las líneas que hemos introducido:
Lo primero que hemos de hacer es decirle a nuestra clase que va a trabajar como si de un clip de película se tratase, por lo que incluimos la línea import flash.display.MovieClip y al lado del nombre de la clase añadimos extends MovieClip. Y despues en el constructor (el constructor es la función que tiene el mismo nombre de la clase y que se ejecuta la primera de todas) vamos a indicarle a nuetro clip de película mc_figura que modifique su posición en el escenario de tal forma que cuando se ejecute el archivo, su posición en el eje x sea su posición en el eje x actual más su ancho, y eso se hace: mc_figura.x = mc_figura.x + mc_figura.width. Donde x es la posición en el eje x de la figura y width el ancho de la figura.
Y ya estaría. Solo nos queda probar la película para comprobar que cuando se ejecuta, la figura no está donde la declaramos sino desplazada hacia la derecha (se desplaza hacia la derecha porque hemos sumado, si hubiéramos restado, se hubiera desplazado hacia la izquierda).
En el anterior tutorial vimos como interactuar entre una clase y el escenario de Flash con un código más simple. Ahora vamos a ver como acceder a más propiedades del objeto del escenario y como crear nuestro primer evento. Para ello, abrimos el archivo que creamos en el anterior tutorial (tutorial.fla) así como la clase (coche.as).
Vamos a editar nuestro objeto en el escenario, ya que en el último tutorial creamos un cuadrado para probar la comunicación. Para ello, vamos al escenario y a nuestro cuadrado, le añadimos dos ruedas, las cuales convertimos a clip de película y como nombre de instancia le ponemos mc_rueda1 y mc_rueda2 y modificamos el nombre de instancia del cuadrado y le ponemos mc_chasis.
Como podçes ver, en mi caso he intentado simular un carruaje y las cuerdas las he hecho transparentes y con radios para que se vea su movimiento. Una vez hecho estas modificaciones, lo que vamos hacer es generar un clip de película al que llamaremos mc_coche y que contendrá tanto el chasis como las ruedas. Para ello, seleccionamos todo el contenido del escenario y pulsamos F8 y creamos el clip.
Ahora vamos a nuestra clase coche.as y modificamos su contenido ya que ya no tenemos el clip figura. Lo primero que vamos hacer es guardarnos las referencias a las ruedas en una variable para así poder acceder más rápidamente a las ruedas desde cualquier función. Para ello, agregamos un par de variables antes del contructor y dentro del constructor lo que hacemos es darles valor.
Como se puede ver, cuando tenemos un clip de película dentro de otro, para acceder al de dentro, accedemos a través del nombre de instancia del primero, seguido de un punto y el nombre de instancia del segundo y así sucesivamente.
Una vez hecho esto, vamos a modificar el método Conducir, en el cual, le vamos a indicar a las ruedas que giren, ya que estamos conduciendo. Para ello a cada una de las ruedas le vamos a indicar que gire 15º en sentidohorario y eso se hace de la siguiente forma:
Como podemos ver, a las variables _rueda1 y _rueda2, les hemos modificado la propiedad rotation y le hemos dicho que rote 15º con respecto a su posición actual. Si quisieramos que rotara en sentido contrario a las agujas del reloj, tendríamos que indicarle como valor de rotación -15º. Al poner += indicamos que ha de girar con respecto a su posicion actual, si pusieramos únicamente =, le estaríamos indicando que queremos que rote hasta la posición 15º.
Ahora para comprobar que giren las ruedas, desde el constructor añadimos la llamada a la función:
Si probamos la pelicula, veremos que las ruedas giran 15º pero una sola vez y lo que nos interesa es que cuando llamemos a la función Conducir, las ruedas no paren de girar. Hay varias formas de hacer esto. Una sería incluir las instrucciones de rotación dentro de un bucle, algo que no aconsejo porque se nos colgaría el ordenador. Para este tipo de cosas, hay una función en ActionScript que nos permite llamar a una función cada cierto tiempo. La función en cuestión es setInterval. Esta función recibe como parámetros la función a la que queremos llamar, el número de milisegundos que hay que esperar antes de volver a llamar a la función y después los parámetros que queramos enviar a la función. Importante: para poder utilizar esta función hay que añadir una línea al principio de la clase: import flash.utils.* Al final la clase quedaría así:
Si probamos la película, veremos que las ruedas giran 15º cada 200 milisegundos, dando el efecto de que el coche está moviéndose.
Y esto es todo por hoy. Ahora dejo en vuestras manos el que creeis nuevas funciones que modifiquen proiedades del coche y llamarlas con el setInterval.
bueno al fin termine mi post y espero que les guste mucho!
