ACTIONSCRIPT 3

ACTION SCRIPT 3.0 CON FLASH CS4

Vamos aprender a introducir código actionscript 3.0 dentro del programa flash CS4 para dar interactividad a nuestros juegos y presentaciones en flash.

ActionScript 3.0 es el lenguaje de programación que utiliza flash para poder darle mas potencial a los trabajos en flash.

Es importante que leas este tutorial por orden y que vayas realizando los ejercicios que te proponemos en cada sección.

Verás que es muy facil hacer tus propios juegos y creaciones.

Lo primero es tener instalado en tu ordenador el programa Flash CS4 o versiones superiores.



También te recordamos que si quieres aprender a programar, independientemente del lenguaje elegido, es muy recomendable aprender los fundamentos de programación.

Te recomendamos este libro por lo bueno que es y por su bajo precio:




En flash tenemos un escenario (stage).

En este escenario colocaremos objetos programables (llamados instancias en flash).

Los objetos los podemos añadir mediante flash, creando dibujos, añadiendo imágenes, textos, etc y posteriormente darles propiedades (color, tamaño, forma, etc) y métodos (acciones que tienen que realizar).

También se pueden añadir objetos al escenario desde AS (actionscript), pero es más fácil añadirlos directamente mediante flash.

Cuando en flash creamos o importamos un símbolo a la biblioteca, de este símbolo podemos agregar al escenario una o varias instancias de él, cada una con un nombre diferente.

A partir de ahora cada una de esas instancias para AS será un objeto diferente en el escenario.

A cada objeto, identificándolo con su nombre, ya le podemos poner propiedades y darle acciones a realizar.

Para que un texto sea un objeto, es necesario que sea del tipo dinámico o introducción de texto.

Realmente estos dos tipos de textos son cuadros de textos, con propiedades para el fondo del cuadro, el borde y el tipo de texto dentro del cuadro de texto.

En AS cuando escribamos código es bueno poner comentarios (sobre todo si el programa es muy largo) para saber en que parte del programa estamos. Los comentarios empiezan con // El Comentario.

Todo lo que escribamos detrás de las // el programa va a considerar que no es parte del código. Las instrucciones acaban siempre con ; (punto y coma).

Ojo con las Mayúsculas y las minúsculas, en AS no son iguales.


LAS PROPIEDADES

Se pone el nombre del objeto y seguido de un punto la propiedad. Si esa propiedad tiene valores se pondrá un igual seguido de su valor

NombreObjeto.propiedad = valor;
- alpha = Nivel de transparencia. Predeterminado 1 (0.5 la mitad)
- x = Posición en horizontal en pixeles. Predeterminado 0
- y = Posición en vertical en pixeles. Predeterminado 0
- rotation = gira el objeto los grados que indiquemos después del igual.
- height = Altura en pixeles.
- width = Anchura en pixeles.
- scaleX = Escala horizontal. Predeterminado 1
- scaleY = Escala vertical. Predeterminado 1
- visible = Si es visible o no. Predeterminado true, false seria invisible.

Podríamos hacer que no se viera un objeto con alpha, pero seguiría estando en el escenario.

Para desactivarlo es mejor hacerlo con visible = false.

- trace no es una propiedad pero nos sirve para trazar valores en la pantalla de salida de flash.
- trace (this.mouseX) nos marca la posición del puntero del ratón.
- this hace referencia a todo nuestra película
- stage hace referencia al escenario

Vamos a empezar a trabajar con AS. Para acceder al editor de AS se pincha en la pestaña de acciones, del panel de Acciones de Flash.

Como vemos es un editor de texto, donde podemos escribir el código para cada fotograma.

Es importante que cuando creamos un objeto (instancia) al nombre le preceda las letras _btn, si es un boton, _mc si es un clip de imagen o película (Objeto_mc), así es editor de código nos ayudará en algunas expresiones al identificar el tipo de objeto que es.


Ejercicios:

1º) Crea un símbolo de un ovalo. Añade 2 instancias del símbolo en el escenario cada una con su nombre diferente.

Ahora cambia sus propiedades con AS.

2º) Importa una imagen y cámbiale algunas de sus propiedades median AS.

¿Fácil no?. Ya sabemos que muchas de estas cosas se podían hacer mediante flash sin AS, pero no olvidemos que queremos aprender AS y por algo hay que empezar.

Además es muy bueno mezclar AS con Flash.

Por ejemplo para un texto podemos definir muchas de su propiedades con Flash, y en un momento determinado hacer que cambien (las del mismo texto) mediante AS.

Esto no se podría hacer solo con flash.

Ya que hablamos de texto vamos a ver algunas propiedades que podemos dar a los textos, sabiendo que primero hay que crear el cuadro de texto y darle un nombre de instancia para identificarlo.

Una vez creado el cuadro de texto, inicialmente, no tiene texto, ni borde, ni fondo. Por eso hay que ponerle todas estas propiedades.

NombreCuadro.text = “El texto que queremos que tenga nuestro cuadro de texto” // en AS todo lo que va entre comillas se considera caracteres (texto). Los valores numéricos (números) no llevan comillas.

5 es el valor de 5 y “5” es el carácter (texto) 5.
Ejemplo : nuestroTexto.text = "Hola Mundo" //Ojo nuestroTexto es el nombre de un cuadro de texto creado con flash de texto dinámico.

El alto, el ancho, el color y el tipo de texto es mejor definirlo con flash al crear el cuadro de texto (texto dinámico) pero también podemos cambiarlas con AS:

height para el alto del texto
width para el ancho

Los colores en AS son colores hexadecimales, es decir se nombran con 6 números y letras, auque en AS se debe empezar por 0xvalorHexadecimal (cero por)

Ejemplos: 0xFF0000 Rojo 0x00FF00 verde 0x0000FF azul 0xFFFFFF blanco y
0x000000 el negro (todo ceros) Para los demás colore se puede consultar en Internet un tabla de colores hexadecimales.
Para hacer un sombreado (color de fondo=background). Primero le diremos que el cuadro de texto tiene fondo texto.background = true; después le decimos el color de este fondo texto.backgroundColor = 0xFF0000; No olvidemos que al crear el texto dinámico lo que estamos creando es un cuadro de texto sin borde, sin fondo, etc.

Para un borde se hace lo mismo: texto.border = true; y después el color texto.borderColor = 0x0000FF; El color del texto es más complicad (ya lo veremos)

Ejercicio: Crea un cuadro texto dinámico y añádele texto, borde y sombreado mediante AS.

LOS METODOS (LAS ACCIONES)

Los métodos se escriben con el nombre del objeto seguido de un punto + el nombre del método + paréntesis. Hay algunas acciones que necesitan alguna característica más y se pondrá dentro del paréntesis.

- stop (); Suele ir sola y detiene la película en el fotograma en el que se ponga. También se puede poner para parar un sonido por ejemplo musica.stop();

Si un objeto tiene movimiento podemos parar el movimiento. Ejemplo: pajaro_mc.stop(); // el objeto pajaro deja de reproducirse, se queda en pausa.

- play(); volver a poner en marcha la película.

stopAllSounds(); para todos los sonidos

En algunos métodos se debe escribir dentro del paréntesis un valor (una variable, un número, etc) para tener información adicional necesaria para realizar la acción

- Pajaro_mc.gotoAndPlay(15); Detiene el mc (clip de pelicula) Pajaro_mc en el fotograma 15 (se supone que el pájaro tiene movimiento)

- gotoAndStop (15); va al fotograma 15 de la película (no tiene objeto delante) y se para.

Algunos métodos se utilizan sin objetos. En este caso afectaría a la película.

- nextFrame(); avanza hasta el siguiente fotograma.

- prevFrame(); retrocede hasta el fotograma anterior

- Para los textos, flash nos permite poner un hipervínculo al texto desde el panel de acciones, en opciones, escribiendo la URL. Nunca a un objeto.

Algunos métodos son para el ratón (Mouse):

- Mouse.hide(); Esconde el cursor (puntero del ratón) solo se le puede dar esta propiedad al raton (Mouse).

- Mouse. show(); Hacer Aparece el cursor

- startDrag();Cuando colocamos el ratón en la instancia que precede al startDrag() (sin pulsar) la instancia sigue al ratón, es decir arrastramos la instancia o el objeto siguiendo los pasos del ratón.

Ejemplo nube_mc.starDrag(); nada mas colocar el ratón encima de la nube esta seguirá al ratón constantemente hasta que se active una acción stopDrag();

Como se vera mas adelante es mejor hacerlo con una función y dentro de la función el starDrag();

- stopDrag(); Deja de arrastrarse el objeto con el ratón.

En otros métodos deberemos, normalmente, asignárselas como valor a una variable (ya veremos las variables). Nunca se pueden poner a textos.

Math.random(); genera un numero aleatorio entre 0 y 1. Lógicamente este numero deberemos utilizarlo para algo, por ejemplo x = Math.random();. La x tomara el valor del número aleatorio. Ojo pueden ser decimales.

- Math.random()*NumeroFinal; Genera un numero aleatorio entre 0 y el NumeroFinal menos 1, por ejemplo Math.random()*10; entre 0 y 9. Ojo pueden ser decimales.

- Math.floor(Math.random() * 10) Genera un numero aleatorio entre 0 y 9 Pero solo números enteros (redondea el numero decimal), Si queremos que sea hasta 10 podría ser Math.floor(Math.random() * 10) + 1 (entre 1 y 10). Math.floors hace que el número sea entero.

Ejercicios:

1º) Crea una nube y que al colocar el cursor sobre ella le siga, pero sin que se vea el puntero del ratón.

2º) Crea un Texto que al pinchar sobre él nos lleve a una página web (hipervínculo).

3º) Crea un objeto y dale movimiento.

Prueba la película. Ahora pon que el objeto se pare en un fotograma concreto (por ejemplo en el 15). 4º) Haz que el programa trace un numero aleatorio entre 0 y 20.


LAS VARIABLES

Una variable es un sitio donde se almacenan datos.

Estos datos pueden ser numéricos, de texto, o booleanos (false o true).

Se llaman variables por que los datos almacenados en la variable pueden ir cambiando a lo largo del programa (por ejemplo la puntuación de un juego). Cuando llamamos a una variable, lo que recogemos es el valor de la variable.

Los tipos de variables, según lo dicho, pueden ser:

String para variables de texto

Number para variables numéricas. Su valor nunca va entre comillas. (si el numero es un entero se puede poner int en lugar de Number)

Bolean solo pueden ser true o false.

Para declarar una variable, es decir añadirla a nuestro código AS, primero se pone var, luego el nombre de la variable, luego :, el tipo de variable, y por ultimo un = seguido de su valor inicial. Esquema:

Var nombreVariable:tipoVariable = valor inicial;

El valor inicial es opcional.

Ejemplos:

var nombre:String = “Me llamo Juan”; //variable de texto.

Var puntos:Number = 3; // variable numérica

Podemos unir dos variable, una numérica y otra de texto para obtener una frase de la siguiente forma:

var nombreVariable:Number = 5
var texto:String = ("Mi edad es" + nombreVariable)

Obtendremos la frase Mi edad es 5 o también una suma de dos variables de texto o numéricas o mezcla de las dos:

var numero:Number = 5
var nombre:String = "El numero es mayor de"
var texto:String = (nombre + numero)

Si queremos asignarle un texto a un cuadro de texto ya sabemos que es con el nombre del cuadro seguido de text (no de String).

A este cuadro también le podemos dar como salida un texto + una variable numérica, pero nunca solo una variable numérica.

También tenemos constantes que no cambiaran en todo nuestro proyecto y que podamos acceder a ellas y siempre tendrán el mismo valor. Para definir una constante:

const Nombre_constante:Tipo = Valor
const Nombre:String = “Juan”

Ejercicio: Crea un cuadro de texto que de cómo salida el texto “El numero es” + una variable cuyo valor sea un numero aleatorio entre 0 y 10. Ahora la frase “El numero es” conviértela en una variable de texto y haz que en el cuadro de texto aparezcan las dos variable (variableDeTexto + VariableNumerica).

Para trabajar con variables (compararlas, sumarlas, saber si son mayores o menores que, etc) se utilizan los Operadores.

LOS OPERADORES

- + suma
- - resta
- * multiplicación
- / división
- Math.sqrt (numero); Raiz cuadrada
- Math.pow (3,2) 3 elevado a 2 (potencias)
- += suma con asignación. A lo de la izquierda se le suma el valor de la derecha.
Si tenemos una variable que vale 4 llamada numero y ponemos numero += 1; el resultado es que ahora la variable valdrá 5, es como si hubiéramos puesto numero = numero + 1;. También podríamos sumarle otra variable.
- *= multiplicación con asignación
- /= división con asignación.
- > mayor que
- < menor que
- = igual
- = = comprueba si es igual lo de un lado que lo del otro de la igualdad
- && operador Y
- || operador O

Ejercicios:

1º) Realiza un programa para que calcule la multiplicación de un numero fijo por otro aleatorio y nos trace el resultado.

2º) Crea una variable numérica con un valor inicial. Ahora mediante la suma con asignación añade 1 al valor inicial de la variable. Traza el resultado.

3º) Ahora crea una raíz cuadrada de un número y que en un cuadro de texto en el escenario aparezca:
(“La raiz cuadrada de” + “ ” + numeroraiz + “es “+ “” + variableResultado).

Ojo no se puede poner un resultado solo numérico en un cuadro de texto. Para hacerlo primero tenemos que convertir la variable numérica a una variable de texto de la siguiente forma. Imaginemos que tenemos un cuadro de texto dinámico llamado texto (nombre del objeto) y una variable numérica llamada numero. Para convertirla a una variable de texto y que salga el número el cuadro de texto seria:

var numero:Number = 8;
var variableSalida:String = numero.toString();
texto.text = variableSalida; o también añadirle un texto como hicimos al principio.

Ejercicio: Haz el resultado de una operación numérica y que el resultado aparezca en un cuadro de texto en el escenario, convirtiendo la variable del resultado numérica, en variable de texto.

LAS CONDICIONALES

Nos permiten controlar la lógica del programa, podemos decir que podemos “hablar” con el programa para decirle lo que tiene que hacer en determinadas ocasiones.

if (condiciones) { //acciones que se realizaran si se cumple la condición}

Podemos escribir varios if para varias condiciones diferentes, por ejemplo si tenemos un numero podemos decirle al programa si el numero es mayor 4 esto, si es menor esto, si vale 10 esto, ….etc

También tenemos:

if (condición) {acciones_si_se_cumple; } else {acciones_si_no se cumple; }
Para poner dos condicionales (dos condiciones) se separan con &&
if (condicion 1 && condicion 2) se tienen que cumplir las dos condiciones

Si queremos que se cumpla solo una de varias condiciones:

if (condicion1 || condicion2 || condicion3) solo tiene que cumplir una de las 3 condiciones para realizarse las acciones de la condicional. Las dos barras rectas salen con Alt Gr + tecla 1.

Por último tenemos una condicional muy usada que es:

if (Objeto1.TestObject(Objeto2)) { lo que hace si cumple la condición}

La condición es si el objeto1 choca con el objeto 2 (colisiona)

Ejercicios:

1º) Crea un numero aleatorio entre 0 y 50. Si el resultado es mayor de 25 que de salida ponga en un cuadro de texto “El numero es mayor de 25”, y si es menor que ponga “Es menor de 25”. Si quieres saber el número ya sabes trace.

2º) Dibuja 2 objetos en el escenario y que uno de ellos se arrastre cuando pasa el ratón sobre él. Cuando el que se arrastra toque el segundo objeto este tiene que dejar de verse (alpha) y en un cuadro de texto aparecer la palabra “Colisión”.

LAS FUNCIONES

Son trozos del programa que realizan determinadas cosas. Por ejemplo una función que realiza una multiplicación, que mueve un objeto, etc. Una función se escribe de la siguiente forma:

function NombredelaFuncion () :void {
//las acciones a realizar por la funcion. Esto seria un comentario.
}

Ejemplo function sumar ():void { var suma = variableA + variableB; nextFrame(); }

Para que el programa entre en la función a realizar lo que tiene dentro se hace escribiendo simplemente el nombre de la función y el programa nos llevará a la función (en el caso anterior escribir sumar;). Lo más normal es que a una función se acceda desde la llamada de un listener.

LOS LISTENER

Los listener se utilizan para detectar que el usuario realiza alguna acción, diremos que ha sucedido un evento (pulsar un tecla, pinchar con el ratón, etc). Los listener escuchan el evento y cuando lo detectan envían al programa a una función, en la cual el programa realizará algo. Tienen la siguiente estructura:

Nombreinstancia.addEventListener (NombredelEvento, FunciónaLaQueNosLlevará)

Ejemplo: Objeto1.addEventListener (MouseEvent.MOUSE_DOWN, escriba)

En este listener cuando el ratón se pulse sobre el Objeto1, el listener nos lleva a la función escriba, y el programa realizará lo que haya dentro de esta función. Ojo cuando a una función se entra después de un evento (desde un listener) hay que poner dentro del paréntesis de la función el evento desde la que se le llama precedido de e: . En este caso (e:MouseEvent) . De la siguiente forma:

function escriba (e:MouseEvent) :void {
//l o que hace la función.
}

Ejercicio: Realiza un programa con un cuadro de texto y que al pulsar el ratón sobre el escenario (stage será quien llama al listener no Objeto1) aparezca “Pulsamos El Ratón”.

Los eventos más importantes son los realizados con el ratón MouseEvent y tenemos los siguientes:

- MouseEvent.CLICK - Se produce al hacer clic (pulsar y soltar el botón ratón).
- MouseEvent.DOUBLE_CLICK - Se produce al hacer doble clic.
- MouseEvent.MOUSE_DOWN - Se produce al pulsar el botón del ratón (antes de soltarlo).
- MouseEvent.MOUSE_MOVE - Se produce cuando el ratón se mueve sobre el elemento.
- MouseEvent.MOUSE_OUT - Se produce cuando se saca el cursor de encima del objeto.
- MouseEvent.MOUSE_OVER - Se produce cuando el ratón se coloca sobre el objeto.
- MouseEvent.MOUSE_UP - Se produce cuando se suelta el botón del ratón.
- MouseEvent.ROLL_OUT – Se produce cuando se mueve el ratón fuera del elemento. Para que cuando pulsemos y al soltar el ratón, ya no tengamos el cursor dentro de la instancia. Por ejemplo es útil para objetos en movimiento, ya que puede ser que ya no tengamos el cursor del ratón dentro del objeto al soltarlo. Si ya no tenemos el cursor dentro de la instancia el evento MOUSE_UP ya no funcionaria, sin embargo con ROLL_OUT esto no pasaría, ya que iría a la función que hemos llamado incluso si al soltar el ratón ya no estamos dentro del objeto.

Una acción que podríamos poner dentro de una función son los hipervínculos en objetos (por ejemplo al hacer click en un botón). Se escribe de la siguiente forma:

- navigateToURL(new URLRequest(“url”),"_blank"); Te lleva a la pagina web definida en miURL. Blank significa que se abrirá en una nueva pagina. Si ponemos _self se abrira en la misma ventana.

Ejemplo:

navigateToURL (new URLRequest ("https://www.jugarconjuegos.com"), "_blank");

Ejercicios: 1º) Crea un botón con hipervínculo al hacer click sobre él.

2º) Crea un programa para una tienda donde podamos introducir el precio del artículo, pero que también le podamos aplicar un porcentaje de descuento. Al final nos tiene que dar el precio a pagar por el artículo, después del descuento.

3º) Crea un programa que haga una pregunta y se conteste la solución en un cuadro de texto de introducir texto. Dibuja un rectángulo (botón) que al pulsarlo salga en un cuadro de texto dinámico si la solución escrita es Correcta o Incorrecta.

4º) Crea un juego con 3 preguntas (cada pregunta en un fotograma diferente) y que además cada pregunta acertada sume un punto al jugador (usa variables).

Hay una categoría genérica de eventos que no pertenecen a ninguna en especial. Esta categoría se llama Event.

ENTER_FRAME Ejecuta la función a la que se llama, un numero de veces igual al que tengamos definido la velocidad de nuestra película. Si es 24fps pues ira a la función que se llama 24 veces por segundo. El listener llamará a la función 24 veces cada segundo.

Se suele usar mucho para definir movimientos de objetos. En nuestro caso podríamos cambiar la posición del objeto cada 1/24 segundos.

stage.addEventListener(Event.ENTER_FRAME, movimiento);

Ejercicio: Crea un objeto que se mueva por el eje x del escenario. Ojo cuando salga del escenario por la derecha que se coloque en la parte izquierda del escenario.

Hay una acción en AS que sirve para controlar el tiempo, es la setInterval. Esta acción nos lleva cada cierto tiempo (definido por nosotros) a una función (también definida por nosotros. La acción se le pone a una variable. Ejemplo:
var intervalo = setInterval(sumar,1000);

Nos lleva a la función sumar cada 1000 milisegundos (1 segundo). Ojo esta función no se para hasta que no encuentre un clearInterval con el nombre de la variable a la que la habíamos asignado. En el caso anterior cuando queremos que se para pondríamos:

clearInterval(intervalo); esto suele ir dentro de una condicional if (si se cumple)

Ejercicio: Realiza un segundero que cuente hasta 10.

CONTROL DESDE EL TECLADO

Las teclas del teclado tienen cada una asignado un código numérico para identificarlas llamado keyCode. Así cuando queremos hacer algo con una tecla, para especificar la tecla debemos de poner su keyCode. Ejemplos:

Tecla derecha 39, Tecla izquierda 37, Tecla arriba 38, Tecla abajo 40

Tecla enter 13, escape 27, tecla espacio 32.

Lo mismo que los eventos del ratón se llamaban MouseEvent , los eventos para detectar cuando se ha pulsado una tecla del teclado se llaman KeyBoardEvent y por ejemplo para detectar que una tecla se pulsa seria el siguiente listener

NombreInstancia.addEventListener(KeyboardEvent.KEY_DOWN, funcion);

KEY_DOWN sirve para detectar la pulsación de una tecla cualquiera.

Con este listener podemos llamar a una función que dependiendo el KeyCode que se haya pulsado haga una cosa u otra:

function posicion (e:KeyboardEvent):void {
if (e.keyCode == 37)
{objeto1.x += 3} //desplaza 3 la posición x del objeto1
if (e.keyCode == 39)
{Objeto1.x += 3}
}
e.KeyboardEvent es para detectar el evento del que procede.

Ojo a veces hay que determinar que objeto del escenario esta seleccionado. A esto se le dice quien tiene el foco. Para determinar quien tiene el foco se pone de la siguiente forma: stage.stageFocusRect = false; stage.focus = Objeto;

Ejercicio: Crea un programa que mueva un objeto creado por ti con las teclas de dirección (variable movimiento que aumente 3 al pulsar la tecla, pero ojo, usa rotacion para colocar bien el objeto antes de moverse 0, 90, -90 y 180 grados).

Elige un de los 3 juegos siguientes para realizar:

Juego 1: ¿Serías capaz de hacer un juego que un objeto se tenga que desplazar de un sitio a otro y si choca con algunos de los otros objetos del escenario pierdas? . Los objetos del escenario podrían tener movimiento por si solos.¿Podrías poner tiempo para llegar a la meta?

Juego 2: Crea un juego de preguntas y respuestas con puntuación.

Juego 3: Juego en el que se tiene que adivinar un número aleatorio diciéndonos si es mayor o menor del numero que introduzcamos en un cuadro de texto. 5 posibilidades para acertar.

Trabajo final: Crea un Programa Diseñado y Creado por Ti.

Antes de acabar, si te interesa aprender a programar, te recomendamos que empieces con este libro "Fundamentos de Programación Para Todos Los Públicos". Es un buen libro y con un precio fantástico:



Si te ha gustado haz click en Compartir, Gracias:

© Se permite la total o parcial reproducción del contenido, siempre y cuando se reconozca y se enlace a este artículo como la fuente de información utilizada.