Aunque no está terminado al 100%, cualquiera que conozca el team puede usar este material perfectamente para dar clases de iniciación a sus alumnos.

1. - ADOBE FLASH -INICIACIÓN A ACTIONSCRIPT 3 DISEÑO DE WEB EN FLASH Francisco Ortiz Vieiro - 2011

3. Tipos de datos.

4. Operadores.

5. Condicionales.

6. Bucles.

7. Funciones.

8. Eventos.

9. Funciones más comunes.

10. Implementación web.2

11. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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). 3

12. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EXPRESIONES Una 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

13. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EXPRESIONES Para escribir comentarios: /* */ : Para cuando es más de una línea. /* comentario en varias líneas */ // : Para cuando es en una sola línea. // comentario en una línea. 5

14. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EXPRESIONES Para mostrar la información en la consola en tiempo de ejecución utilizaremos la función trace(); trace(“texto”); 6

15. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

16. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

17. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

18. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES Ejercicio 2 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. Desordena el siguiente array y después vuelve a ordenarlo. [0,1,2,3,4,5,6,7,8,9] 10

19. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH CONDICIONALES if… else Permite 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

20. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH CONDICIONALES var variable:int = 10; if (variable > 20) { trace(“variable es mayor a 20"); } else { trace("variable es menor o igual a 20"); } 12

21. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH CONDICIONALES var 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

22. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH CONDICIONALES switch Resulta útil si hay varios hilos de ejecución que dependen del valor de una misma variable. Ej.: un menú 14

23. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH CONDICIONALES var 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

24. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

25. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES Permiten 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

26. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

27. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES Requiere 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

28. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES for… in Recorre las propiedades de un objeto o los elementos de una matriz. 20

29. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES for… in con Objetos var miObj:Object = {x:20, y:30}; for (var i:String in miObj) { trace(i + ": " + miObj[i]); } 21

30. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES for… in con Arrays var miArray:Array = ["one", "two"]; for (var i:String in miArray) { trace(miArray[i]); } 22

31. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES For each… in El bucle for each...in recorre los elementos de una colección. 23

32. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES A 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

33. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

34. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES var 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

35. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

36. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES var i:int = 5; do { trace(i); i++; } while (i < 5); 28

37. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES Ejercicio 5 Dibujar con ayuda de un llamando varias veces a la función trace(), lo siguiente: XXXXX Reutilizando el código anterior, dibujar lo siguiente: XXXXX XXXXX XXXXX XXXXX Probemos c0n algo más complicado: H HO HOL HOLA 29

38. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH BUCLES Escribe los números del 1 al 10, uno debajo del otro. Dibuja el siguiente cuadrado vacio para que quede como se muestra a continuación: XXXXX X X X X XXXXX Crea un código para mostrar las tablas de multiplicar como ves a continuación usando la función trace();: La tabla del 1: 1 x 0 = 0 … 1 x 10 = 10 La tabla del 2: … 30

39. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

40. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH FUNCIONES Sentencia de funciones sin parámetros: function ejFuncion ():void{ trace(“Hola Mundo”); } ejFuncion(); 32

41. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH FUNCIONES Sentencia de funciones con parámetros: function ejFuncion(parametro1:String) :void{ trace(parametro1); } ejFuncion(“Hola Mundo”); 33

42. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

43. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH FUNCIONES Ejercicio 6 Responde a las preguntas sobre la siguiente función: 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); } } } ¿Cómo se llama la función? ¿Qué parámetros tiene? ¿Qué devuelve la función? ¿Qué realiza la función? 35

44. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH var numeroAleatorio:uint = 2 + Math.floor(Math.random()*3); trace("Tu nuevo nombre es "+ generarNombre(numeroAleatorio)); FUNCIONES 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 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); 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. 36

45. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EVENTOS ActionScript 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

46. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EVENTOS Ejemplos 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

47. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EVENTOS Un 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

48. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EVENTOS En 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

49. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

50. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

51. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

52. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

53. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EVENTOS Aquí vemos un ejemplo donde un clip llamado clipMovimiento se mueve hacia la derecha a una velocidad de 5 pixeles/fotograma. clipMovimiento.addEventListener(Event.ENTER_FRAME, mover); function mover(e:Event):void{ clipMovimiento.x += 5; } 45

54. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH 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

55. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EVENTOS Aquí vemos un ejemplo de utilización del evento de ratón MouseEvent.DOUBLE_CLICK 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")); } 47

56. ADOBE FLASH - INICIACION A ACTIONSCRIPT PROGRAMANDO CON FLASH EVENTOS Ejercicio 7 Vamos a crear la siguiente animación: 48