- 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).
ADOBE FLASH - INICIACION A ACTIONSCRIPT
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;
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
5
EXPRESIONES
Para mostrar la información en la consola en tiempo de ejecución utilizaremos la función trace();
trace(“texto”);
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
7
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);
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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]
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
10
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
11
CONDICIONALESvar variable:int = 10;
if (variable > 20) {trace(“variable es mayor a 20");
} else {trace("variable es menor o igual
a 20");}
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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");
}
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
13
CONDICIONALES
•switchResulta útil si hay varios hilos de ejecución que dependen del valor de una misma variable.
Ej.: un menú
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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;
}
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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);
}
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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]);
}
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
19
BUCLES
•for… in
Recorre las propiedades de un objeto o los elementos de una matriz.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
20
BUCLES•for… in con Objetos
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
21
var miObj:Object = {x:20, y:30};
for (var i:String in miObj) {trace(i + ": " + miObj[i]);
}
BUCLES•for… in con Arrays
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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);
}
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
27
BUCLES
var i:int = 5;
do {trace(i);i++;
} while (i < 5);
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
28
BUCLES• Ejercicio 5
1.Dibujar con ayuda de un llamando varias veces a la función trace(), lo siguiente:
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
29
XXXXX
2.Reutilizando el código anterior, dibujar lo siguiente:XXXXXXXXXXXXXXXXXXXX
3.Probemos c0n algo más complicado:HHOHOLHOLA
BUCLES
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
31
FUNCIONES•Sentencia de funciones sin parámetros:
function ejFuncion ():void{
trace(“Hola Mundo”);}
ejFuncion();
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
32
FUNCIONES•Sentencia de funciones con parámetros:
function ejFuncion(parametro1:String) :void{
trace(parametro1);}
ejFuncion(“Hola Mundo”);
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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);
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
34
FUNCIONES• Ejercicio 6
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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,...
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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:
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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)
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
44
EVENTOSAquí vemos un ejemplo donde un clip llamado clipMovimiento se mueve hacia la derecha a una velocidad de 5 pixeles/fotograma.
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
46
EVENTOSAquí vemos un ejemplo de utilización del evento de ratón MouseEvent.DOUBLE_CLICK
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
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
ADOBE FLASH - INICIACION A ACTIONSCRIPT
PROGRAMANDO CON FLASH
48
1.Vamos a crear la siguiente animación: