ActionScript 3 - Iniciación

- ADOBE FLASH -INICIACIÓN A ACTIONSCRIPT 3

DISEÑO DE WEB EN FLASH

Francisco Ortiz Vieiro - 2011

INDICE•Conceptos básicos.•Tipos de datos.•Operadores.•Condicionales.•Bucles.•Funciones.•Eventos.•Funciones más comunes.•Implementación web.

ADOBE FLASH - INICIACION A ACTIONSCRIPT

INDICE

2

CONCEPTOS BÁSICOS• Es un leguaje de programación orientado a

objetos (se crean instrucciones para comunicarte con los objetos y que ellos cumplan una función u orden específica) y utiliza notación por puntos.

• Se creó en la versión 4 de Flash para aportarle dinamismo e interactividad a sus animaciones.

cuadrado.x = 400;(indica al objeto “cuadrado”, que su posición según el

desplazamiento horizontal se sitúe en el pixel 400).


PROGRAMANDO CON FLASH

3

EXPRESIONESUna expresión es una instrucción o sentencia que devuelve un valor llamado valor de retorno a una variable.

var nombreVariable:TipoDeDatos;

A la variable se le puede dar un valor inicial cuando se declara.

var nombreVariable:TipoDeDatos = valorInicial;

Cuando ya hemos declarado una variable, y simplemente queremos cambiar su valor ya no hace falta que utilicemos la palabra clave var ni el tipo de datos.

nombreVariable = nuevoValor;



4

EXPRESIONES

Para escribir comentarios:

•/* */ : Para cuando es más de una línea.

/* comentarioen varias líneas */

•// : Para cuando es en una sola línea.

// comentario en una línea.



5

EXPRESIONES

Para mostrar la información en la consola en tiempo de ejecución utilizaremos la función trace();

trace(“texto”);



6

Matrices (vectores o arrays)• Los arrays siempre comienzan en la posición cero.

var miArray:Array = [];var miArray:Array = new Array();var miArray:Array = ["pera","manzana","limon"];

• Para acceder a los valores de un array:

variable = miArray[0];

trace(miArray[1]);trace(miArray);

Más información y métodos de los arrays



7

http://livedocs.adobe.com/flash/9.0_es/ActionScriptLangRefV3/Array.html

Matrices (vectores o arrays)• Para modificar determinada posición del Array usamos

también los corchetes [].

miArray[1] = "fresa";trace(miArray);

• Agregar un elemento en determinada posición

miArray.splice(2,0,"mandarina"); //posición, elementos a eliminar, elemento a añadirtrace(miArray);

•Eliminar un elemento en determinada posición

miArray.splice(1,1); //posición, elementos a eliminartrace(miArray);



8

Matrices (vectores o arrays)• Búsqueda de un elemento.

var index:int = arr.indexOf(“pera");trace(index); //devuelve la posición en el array



9

BUCLES• Ejercicio 2

1.Eliminación de varios elementos no consecutivos que cumplen determinada condición.• Array inicial: fresa, plátano, mandarina, melocotón, kiwi,

albaricoque, piña, manzana, pera.• Condición: Eliminar las frutas cuyo nombre tenga más de 5

caracteres.• Para saber como obtener el número de caracteres de un String

consultar su definición.

2.Desordena el siguiente array y después vuelve a ordenarlo.[0,1,2,3,4,5,6,7,8,9]



10

http://livedocs.adobe.com/flash/9.0_es/ActionScriptLangRefV3/String.html

CONDICIONALES

•if… elsePermite comprobar una condición y ejecutar un bloque de código si dicha condición existe, o ejecutar un bloque de código alternativo si la condición no existe.



11

CONDICIONALESvar variable:int = 10;

if (variable > 20) {trace(“variable es mayor a 20");

} else {trace("variable es menor o igual

a 20");}



12

CONDICIONALESvar variable:int = 10;

if (variable > 20) {trace(“variable es mayor a 20");

} else if (variable < 20) {trace(“variable es menor a 20");

} else {trace(“la variable es igual a 20");

}



13

CONDICIONALES

•switchResulta útil si hay varios hilos de ejecución que dependen del valor de una misma variable.

Ej.: un menú



14

CONDICIONALESvar fechaHoy:Date = new Date();var numDia:uint = fechaHoy.getDay();

switch(numDia) {case 0:

trace(“Domingo");break;

case 1:trace(“Lunes");break;

case 2:trace(“Martes");break;

case …:default:

trace(“Fuera de rango");break;

}



15

CONDICIONALES• Ejercicio 4

Crea un archivo .FLA Realizaremos algunas operaciones de las que acabamos de ver y utilizaremos la función trace().

Dispondremos de tres variables nombre, sexo y edad que se declararán e inicializarán al principio del programa.

En función del sexo y la edad elaboraremos una frase indicando que esa persona pertenece a uno de los grupos siguientes.



16

EdadSexo

0-16 16-30 +30

Hombre Niño Hombre joven

Hombre adulto

Mujer Niña Mujer joven

Mujer adulta

BUCLESPermiten ejecutar un bloque específico de código repetidamente utilizando una serie de valores o variables.

Hay 5 tipos de bucles:• for• for… in• for each… in• while• do… while



17

BUCLES

•for

Permite repetir una variable para un rango de valores específico.

var i:int;

for (var i:int = 0; i < 5; i++) {trace(i);

}



18

BUCLESRequiere de tres expresiones:

•Una variable que se establece con un valor inicial. •Una sentencia condicional que determina cuándo termina la reproducción en bucle.•Una expresión que cambia el valor de la variable con cada bucle.

var miArray:Array = [“A”,“B”,“C”];

for (var i:int = 0; i < miArray.length; i++) {trace(miArray[i]);

}



19

BUCLES

•for… in

Recorre las propiedades de un objeto o los elementos de una matriz.



20

BUCLES•for… in con Objetos



21

var miObj:Object = {x:20, y:30};

for (var i:String in miObj) {trace(i + ": " + miObj[i]);

}

BUCLES•for… in con Arrays



22

var miArray:Array = ["one", "two"];

for (var i:String in miArray) {trace(miArray[i]);

}

BUCLES

•For each… in

El bucle for each...in recorre los elementos de una colección.



23

BUCLESA diferencia del bucle for... in, la variable de iteración de un bucle for each..in contiene el valor de la propiedad en lugar del nombre de la propiedad.

var myObj:Object = {x:20, y:30};

for each (var num in myObj) {trace(num);

}



24

BUCLES

•while

Es parecido a la sentencia if, solo entra si se cumple la condición y no sale del bucle hasta que deje de cumplirse.



25

BUCLESvar i:int = 0;

while (i < 5) {trace(i);i++;

}

Uno de los problemas de este tipo de bucles es que podemos caer en bucles infinitos.



26

BUCLES

•do… while

Se diferencia con la sentencia while en que éste garantiza que el bloque de código se ejecuta al menos una vez, ya que la condición se comprueba después de que se ejecute el bloque de código.



27

BUCLES

var i:int = 5;

do {trace(i);i++;

} while (i < 5);



28

BUCLES• Ejercicio 5

1.Dibujar con ayuda de un llamando varias veces a la función trace(), lo siguiente:



29

XXXXX

2.Reutilizando el código anterior, dibujar lo siguiente:XXXXXXXXXXXXXXXXXXXX

3.Probemos c0n algo más complicado:HHOHOLHOLA

BUCLES



30

La tabla del 1:1 x 0 = 0…1 x 10 = 10

La tabla del 2:…

6.Crea un código para mostrar las tablas de multiplicar como ves a continuación usando la función trace();:

5.Dibuja el siguiente cuadrado vacio para que quede como se muestra a continuación:

XXXXXX XX XXXXXX

4.Escribe los números del 1 al 10, uno debajo del otro.

FUNCIONES•Grupo de instrucciones cuya ejecución se lleva a cabo cada vez que se invoca el nombre de la función con valores de entrada y tras realizar un cálculo devuelve un valor.

Existen dos tipos de funciones:

•Se denomina método si se define como parte de una definición de clase o se asocia a una instancia de un objeto.

•Se denomina cierre de función si se define de cualquier otra manera.



31

FUNCIONES•Sentencia de funciones sin parámetros:

function ejFuncion ():void{

trace(“Hola Mundo”);}

ejFuncion();



32

FUNCIONES•Sentencia de funciones con parámetros:

function ejFuncion(parametro1:String) :void{

trace(parametro1);}

ejFuncion(“Hola Mundo”);



33

FUNCIONES•Sentencia de funciones con parámetros y que devuelve un valor:

function ejFuncion(parametro1:int) :int{parametro1 = parametro1 + 5;return(parametro1);

}

var cadena:int = ejFuncion(5);



34

FUNCIONES• Ejercicio 6



35

function dibujar(lado:uint):void{for(var i:int = 0; i<lado; i++){

for(var j:int = 0; j<lado; j++){var linea:String = "";if(i == j){

linea = linea + i + j + " - SI";}else{

linea = linea + i + j + " - NO";}trace(linea);

}}

}

1.Responde a las preguntas sobre la siguiente función:

a) ¿Cómo se llama la función?b) ¿Qué parámetros tiene?c) ¿Qué devuelve la función?d) ¿Qué realiza la función?

FUNCIONES



36

var silabas:Array = ["sa","ca","tam","pa","ku"];var nombre:String = "";for(var i:int = 0; i<3; i++){

var aleatorio:Number = Math.floor(Math.random()*silabas.length); nombre = nombre + silabas[aleatorio];

} trace(nombre);

2.El siguiente código genera nombres aleatorios partiendo de sílabas, aún no sabemos como funciona muy bien pero vamos a intentar encapsularlo en una función

var numeroAleatorio:uint = 2 + Math.floor(Math.random()*3);trace("Tu nuevo nombre es "+ generarNombre(numeroAleatorio));

var numeroAleatorio:uint = 2 + Math.floor(Math.random()*3); trace("Tu nuevo nombre es "+ generarNombre(numeroAleatorio));

*Math.floor: redondea.*Math.random: devuelve un nº aleatorio.

EVENTOSActionScript nació siendo un lenguaje orientado a eventos.

Un evento es un suceso que transcurre durante la ejecución de una aplicación. Se dice habitualmente que "se lanza" un evento. A lo largo de la ejecución de una película se suceden muchos eventos. Los eventos pueden venir desencadenados por el usuario o por la propia ejecución del programa. Normalmente un evento viene asociado a un cambio en la película.



37

EVENTOSEjemplos de eventos:

•El usuario pulsa el botón izquierdo del ratón.•El usuario pulsa una tecla del teclado.•El usuario mueve el ratón.•Se reproduce un fotograma de un clip de película.•Incluso podemos crear nuestros propios eventos.



38

EVENTOSUn evento no sirve de mucho si no hay nada ni nadie que lo "escuche“.

El dispatcher es el objeto que lanza el evento.

Los escuchadores o listeners de eventos son objetos que permanecen atentos sobre el lanzamiento de determinado evento. Cuando este evento se lanza, los listeners realizan una determinada función.

Se llama handler o controlador de eventos a la función del listener encargada de capturar y reaccionar ante el suceso de determinado evento.



39

EVENTOSEn ActionScript existen una serie de clases que se utilizan para el control y ejecución de evento. Dos de las clases más importantes de este paquete son: EventDispatcher y Event.

• EventDispatcher: DisplayObject, Sprite, MovieClip, TextField, SimpleButton,...

• Event: MouseEvent, TimerEvent, IOErrorEvent,...



40

EVENTOS•La Clase EventDispatcher

Es la clase padre de todos los dispatcher de eventos de Flash. Contiene la funcionalidad necesaria para lanzar eventos y que así otras clases puedan escucharlos.

Veamos dos de sus funciones más importantes:



41

EVENTOS• addEventListener (nombreEvento:String,

handler:Function):void

Asocia un escuchador a determinado evento de los que lanzará esta clase. De esta forma cuando la clase dispatcher lance el evento se ejecutará la función controladora o handler.

• removeEventListener (nombreEvento:String, handler:Function):void

Gracias a esta función podemos romper la asociación entre listener y dispatcher para que el evento deje de ser escuchado por ese controlador de eventos (handler)



42

EVENTOS•La Clase Event

La Clase Event recoge la información asociada al evento. Habitualmente todos los handlers o controladores de eventos poseen como parámetro un objeto de la clase Event o de una de sus descendientes.

La información quizá mas importante del evento es quien fue el que originó el evento:

•target:ObjectObjeto sobre el que se origina el evento. Ejemplo: botón sobre el que se pulsa.

•currentTarget:ObjectObjeto al que fue asociado el controlador de eventos (handler). A veces no coincide con el target puesto que existen ciertos eventos que se propagan.



43

EVENTOS•Evento enterFrame (Event.ENTER_FRAME)

Se lanza cada vez que transcurre un fotograma en cualquier objeto de visualización.

Usos del evento Event.ENTER_FRAME:•Crear movimiento en nuestras películas Flash: se desplazan los objetos de visualización en cada frame.•Comprobar en que momento ocurre algo.•Realizar tareas que se ejecutan siempre.



44

EVENTOSAquí vemos un ejemplo donde un clip llamado clipMovimiento se mueve hacia la derecha a una velocidad de 5 pixeles/fotograma.



45

clipMovimiento.addEventListener(Event.ENTER_FRAME, mover);function mover(e:Event):void{

clipMovimiento.x += 5;}

EVENTOS•Eventos de ratón (MouseEvent)

Existen varios eventos de ratón, algunos son:

• MouseEvent.MOUSE_DOWN: Al pulsar sobre un objeto interactivo (no hace falta soltar)

• MouseEvent.MOUSE_UP: Al soltar sobre un objeto interactivo• MouseEvent.CLICK: Al pulsar y soltar sobre un objeto interactivo• MouseEvent.DOUBLE_CLICK: Al pulsar y soltar dos veces (requiere

doubleClickEnabled para funcionar)

• MouseEvent.ROLL_OVER: Al colocar el raton sobre un objeto interactivoMouseEvent.ROLL_OUT: Al sacar el ratón de un objeto interactivo

• MouseEvent.MOUSE_MOVE: Mientras se mueva el ratón por encima de un objeto interactivo

• MouseEvent.MOUSE_WHEEL: Al mover la rueda del ratón sobre un objeto interactivo



46

EVENTOSAquí vemos un ejemplo de utilización del evento de ratón MouseEvent.DOUBLE_CLICK



47

boton.doubleClickEnabled = true; //Requerido sólo para el evento doubleClickboton.addEventListener(MouseEvent.DOUBLE_CLICK, clicar);function clicar(e:MouseEvent):void{

navigateToURL(new URLRequest("http://www.google.com"));}

EVENTOS• Ejercicio 7



48

1.Vamos a crear la siguiente animación:

Education

ActionScript 3 - Iniciación