ActionScript 3 - Iniciación

3,091 views
2,903 views

Published on

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.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,091
On SlideShare
0
From Embeds
0
Number of Embeds
298
Actions
Shares
0
Downloads
74
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ActionScript 3 - Iniciación

  1. 1. - ADOBE FLASH -INICIACIÓN A ACTIONSCRIPT 3<br />DISEÑO DE WEB EN FLASH<br />Francisco Ortiz Vieiro - 2011<br />
  2. 2. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />INDICE<br />INDICE<br /><ul><li>Conceptos básicos.
  3. 3. Tipos de datos.
  4. 4. Operadores.
  5. 5. Condicionales.
  6. 6. Bucles.
  7. 7. Funciones.
  8. 8. Eventos.
  9. 9. Funciones más comunes.
  10. 10. Implementación web.</li></ul>2<br />
  11. 11. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />CONCEPTOS BÁSICOS<br />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.<br />Se creó en la versión 4 de Flash para aportarle dinamismo e interactividad a sus animaciones.<br />cuadrado.x = 400;<br />(indica al objeto “cuadrado”, que su posición según el desplazamiento horizontal se sitúe en el pixel 400).<br />3<br />
  12. 12. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EXPRESIONES<br />Una expresión es una instrucción o sentencia que devuelve un valor llamado valor de retorno a una variable.<br />var nombreVariable:TipoDeDatos;<br />A la variable se le puede dar un valor inicial cuando se declara.<br />var nombreVariable:TipoDeDatos = valorInicial;<br />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.<br />nombreVariable = nuevoValor;<br />4<br />
  13. 13. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EXPRESIONES<br />Para escribir comentarios:<br />/* */ : Para cuando es más de una línea.<br />/* comentario<br />en varias líneas */<br />// : Para cuando es en una sola línea.<br />// comentario en una línea.<br />5<br />
  14. 14. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EXPRESIONES<br />Para mostrar la información en la consola en tiempo de ejecución utilizaremos la función trace();<br />trace(“texto”);<br />6<br />
  15. 15. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />Matrices (vectores o arrays)<br />Los arrays siempre comienzan en la posición cero.<br />var miArray:Array = [];<br />var miArray:Array = new Array();<br />var miArray:Array = ["pera","manzana","limon"];<br />Para acceder a los valores de un array:<br />variable = miArray[0];<br />trace(miArray[1]);<br />trace(miArray);<br />Más información y métodos de los arrays<br />7<br />
  16. 16. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />Matrices (vectores o arrays)<br />Para modificar determinada posición del Array usamos también los corchetes [].<br />miArray[1] = "fresa";trace(miArray);<br />Agregar un elemento en determinada posición<br />miArray.splice(2,0,"mandarina"); //posición, elementos a eliminar, elemento a añadirtrace(miArray);<br />Eliminar un elemento en determinada posición<br />miArray.splice(1,1); //posición, elementos a eliminartrace(miArray);<br />8<br />
  17. 17. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />Matrices (vectores o arrays)<br />Búsqueda de un elemento.<br />var index:int = arr.indexOf(“pera");<br />trace(index); //devuelve la posición en el array<br />9<br />
  18. 18. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />Ejercicio 2<br />Eliminación de varios elementos no consecutivos que cumplen determinada condición.<br />Array inicial: fresa, plátano, mandarina, melocotón, kiwi, albaricoque, piña, manzana, pera.<br />Condición: Eliminar las frutas cuyo nombre tenga más de 5 caracteres.<br />Para saber como obtener el número de caracteres de un String consultar su definición.<br />Desordena el siguiente array y después vuelve a ordenarlo.<br /> [0,1,2,3,4,5,6,7,8,9]<br />10<br />
  19. 19. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />CONDICIONALES<br />if… else<br />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.<br />11<br />
  20. 20. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />CONDICIONALES<br />var variable:int = 10; <br />if (variable > 20) {<br /> trace(“variable es mayor a 20");<br />} else {<br /> trace("variable es menor o igual a 20");<br />}<br />12<br />
  21. 21. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />CONDICIONALES<br />var variable:int = 10; <br />if (variable > 20) {<br /> trace(“variable es mayor a 20");<br />} else if (variable < 20) {<br /> trace(“variable es menor a 20");<br />} else {<br /> trace(“la variable es igual a 20");<br />}<br />13<br />
  22. 22. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />CONDICIONALES<br />switch<br />Resulta útil si hay varios hilos de ejecución que dependen del valor de una misma variable.<br />Ej.: un menú<br />14<br />
  23. 23. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />CONDICIONALES<br />var fechaHoy:Date = new Date();<br />var numDia:uint = fechaHoy.getDay();<br />switch(numDia) {<br /> case 0:<br /> trace(“Domingo");<br /> break;<br /> case 1:<br /> trace(“Lunes");<br /> break;<br /> case 2:<br /> trace(“Martes");<br /> break;<br /> case …:<br /> default:<br /> trace(“Fuera de rango");<br /> break;<br />}<br />15<br />
  24. 24. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />CONDICIONALES<br />Ejercicio 4<br />Crea un archivo .FLA Realizaremos algunas operaciones de las que acabamos de ver y utilizaremos la función trace().<br />Dispondremos de tres variables nombre, sexo y edad que se declararán e inicializarán al principio del programa.<br />En función del sexo y la edad elaboraremos una frase indicando que esa persona pertenece a uno de los grupos siguientes.<br />16<br />
  25. 25. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />Permiten ejecutar un bloque específico de código repetidamente utilizando una serie de valores o variables.<br />Hay 5 tipos de bucles:<br />for<br />for… in<br />for each… in<br />while<br />do… while<br />17<br />
  26. 26. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />for<br />Permite repetir una variable para un rango de valores específico.<br />var i:int;<br />for (var i:int = 0; i < 5; i++) {<br /> trace(i);<br />}<br />18<br />
  27. 27. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />Requiere de tres expresiones: <br />Una variable que se establece con un valor inicial. <br />Una sentencia condicional que determina cuándo termina la reproducción en bucle.<br />Una expresión que cambia el valor de la variable con cada bucle.<br />var miArray:Array = [“A”,“B”,“C”];<br />for (var i:int = 0; i < miArray.length; i++) {<br /> trace(miArray[i]);<br />}<br />19<br />
  28. 28. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />for… in<br />Recorre las propiedades de un objeto o los elementos de una matriz.<br />20<br />
  29. 29. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />for… in con Objetos<br />var miObj:Object = {x:20, y:30};<br />for (var i:String in miObj) {<br /> trace(i + ": " + miObj[i]);<br />}<br />21<br />
  30. 30. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />for… in con Arrays<br />var miArray:Array = ["one", "two"];<br />for (var i:String in miArray) {<br /> trace(miArray[i]);<br />}<br />22<br />
  31. 31. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />For each… in<br />El bucle for each...in recorre los elementos de una colección.<br />23<br />
  32. 32. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />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.<br />var myObj:Object = {x:20, y:30};<br />for each (var num in myObj) {<br /> trace(num);<br />}<br />24<br />
  33. 33. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />while<br />Es parecido a la sentencia if, solo entra si se cumple la condición y no sale del bucle hasta que deje de cumplirse.<br />25<br />
  34. 34. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />var i:int = 0;<br />while (i < 5) {<br /> trace(i);<br /> i++;<br />}<br />Uno de los problemas de este tipo de bucles es que podemos caer en bucles infinitos.<br />26<br />
  35. 35. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />do… while<br />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.<br />27<br />
  36. 36. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />var i:int = 5;<br />do {<br /> trace(i);<br /> i++;<br />} while (i < 5);<br />28<br />
  37. 37. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />Ejercicio 5<br />Dibujar con ayuda de un llamando varias veces a la función trace(), lo siguiente:<br />XXXXX<br />Reutilizando el código anterior, dibujar lo siguiente:<br />XXXXX<br />XXXXX<br />XXXXX<br />XXXXX<br />Probemos c0n algo más complicado:<br />H<br />HO<br />HOL<br />HOLA<br />29<br />
  38. 38. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />BUCLES<br />Escribe los números del 1 al 10, uno debajo del otro.<br />Dibuja el siguiente cuadrado vacio para que quede como se muestra a continuación:<br />XXXXX<br />X X<br />X X<br />XXXXX<br />Crea un código para mostrar las tablas de multiplicar como ves a continuación usando la función trace();:<br />La tabla del 1:<br />1 x 0 = 0<br />…<br />1 x 10 = 10<br />La tabla del 2:<br />…<br />30<br />
  39. 39. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />FUNCIONES<br />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.<br />Existen dos tipos de funciones:<br />Se denomina método si se define como parte de una definición de clase o se asocia a una instancia de un objeto.<br />Se denomina cierre de función si se define de cualquier otra manera. <br />31<br />
  40. 40. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />FUNCIONES<br />Sentencia de funciones sin parámetros:<br />function ejFuncion ():void{<br /> trace(“Hola Mundo”);<br />}<br />ejFuncion();<br />32<br />
  41. 41. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />FUNCIONES<br />Sentencia de funciones con parámetros:<br />function ejFuncion(parametro1:String) :void{<br /> trace(parametro1);<br />}<br />ejFuncion(“Hola Mundo”);<br />33<br />
  42. 42. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />FUNCIONES<br />Sentencia de funciones con parámetros y que devuelve un valor:<br />function ejFuncion(parametro1:int) :int{<br /> parametro1 = parametro1 + 5;<br /> return(parametro1);<br />}<br />var cadena:int = ejFuncion(5);<br />34<br />
  43. 43. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />FUNCIONES<br />Ejercicio 6<br />Responde a las preguntas sobre la siguiente función:<br />function dibujar(lado:uint):void{<br /> for(var i:int = 0; i<lado; i++){ <br /> for(var j:int = 0; j<lado; j++){<br /> var linea:String = "";<br /> if(i == j){<br /> linea = linea + i + j + " - SI";<br /> }else{<br /> linea = linea + i + j + " - NO";<br /> }<br /> trace(linea);<br /> }<br /> }<br />}<br />¿Cómo se llama la función?<br />¿Qué parámetros tiene?<br />¿Qué devuelve la función?<br />¿Qué realiza la función?<br />35<br />
  44. 44. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />var numeroAleatorio:uint = 2 + Math.floor(Math.random()*3); trace("Tu nuevo nombre es "+ generarNombre(numeroAleatorio));<br />FUNCIONES<br />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<br />var silabas:Array = ["sa","ca","tam","pa","ku"];<br />var nombre:String = "";<br />for(var i:int = 0; i<3; i++){ var aleatorio:Number = Math.floor(Math.random()*silabas.length); nombre = nombre + silabas[aleatorio]; }<br />trace(nombre);<br />var numeroAleatorio:uint = 2 + Math.floor(Math.random()*3);<br />trace("Tu nuevo nombre es "+ generarNombre(numeroAleatorio));<br />*Math.floor: redondea.<br />*Math.random: devuelve un nº aleatorio.<br />36<br />
  45. 45. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />ActionScript nació siendo un lenguaje orientado a eventos.<br />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.<br />37<br />
  46. 46. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />Ejemplos de eventos:<br />El usuario pulsa el botón izquierdo del ratón.<br />El usuario pulsa una tecla del teclado.<br />El usuario mueve el ratón.<br />Se reproduce un fotograma de un clip de película.<br />Incluso podemos crear nuestros propios eventos.<br />38<br />
  47. 47. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />Un evento no sirve de mucho si no hay nada ni nadie que lo "escuche“.<br />El dispatcher es el objeto que lanza el evento.<br />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.<br />Se llama handler o controlador de eventos a la función del listener encargada de capturar y reaccionar ante el suceso de determinado evento.<br />39<br />
  48. 48. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />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.<br />EventDispatcher: DisplayObject, Sprite, MovieClip, TextField, SimpleButton,...<br />Event: MouseEvent, TimerEvent, IOErrorEvent,...<br />40<br />
  49. 49. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />La Clase EventDispatcher<br />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.<br />Veamos dos de sus funciones más importantes:<br />41<br />
  50. 50. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />addEventListener (nombreEvento:String, handler:Function):void<br />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.<br />removeEventListener (nombreEvento:String, handler:Function):void<br />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) <br />42<br />
  51. 51. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />La Clase Event<br />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.<br />La información quizá mas importante del evento es quien fue el que originó el evento:<br />target:ObjectObjeto sobre el que se origina el evento. Ejemplo: botón sobre el que se pulsa.<br />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. <br />43<br />
  52. 52. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />Evento enterFrame (Event.ENTER_FRAME)<br />Se lanza cada vez que transcurre un fotograma en cualquier objeto de visualización.<br />Usos del evento Event.ENTER_FRAME:<br />Crear movimiento en nuestras películas Flash: se desplazan los objetos de visualización en cada frame.<br />Comprobar en que momento ocurre algo.<br />Realizar tareas que se ejecutan siempre.<br />44<br />
  53. 53. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />Aquí vemos un ejemplo donde un clip llamado clipMovimiento se mueve hacia la derecha a una velocidad de 5 pixeles/fotograma.<br />clipMovimiento.addEventListener(Event.ENTER_FRAME, mover);<br />function mover(e:Event):void{<br /> clipMovimiento.x += 5;<br />}<br />45<br />
  54. 54. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />Eventos de ratón (MouseEvent)<br />Existen varios eventos de ratón, algunos son:<br />MouseEvent.MOUSE_DOWN: Al pulsar sobre un objeto interactivo (no hace falta soltar)<br />MouseEvent.MOUSE_UP: Al soltar sobre un objeto interactivo<br />MouseEvent.CLICK: Al pulsar y soltar sobre un objeto interactivo<br />MouseEvent.DOUBLE_CLICK: Al pulsar y soltar dos veces (requiere doubleClickEnabled para funcionar) <br />MouseEvent.ROLL_OVER: Al colocar el raton sobre un objeto interactivoMouseEvent.ROLL_OUT: Al sacar el ratón de un objeto interactivo<br />MouseEvent.MOUSE_MOVE: Mientras se mueva el ratón por encima de un objeto interactivo<br />MouseEvent.MOUSE_WHEEL: Al mover la rueda del ratón sobre un objeto interactivo<br />46<br />
  55. 55. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />Aquí vemos un ejemplo de utilización del evento de ratón MouseEvent.DOUBLE_CLICK<br />boton.doubleClickEnabled = true; //Requerido sólo para el evento doubleClickboton.addEventListener(MouseEvent.DOUBLE_CLICK, clicar);<br />function clicar(e:MouseEvent):void{<br /> navigateToURL(new URLRequest("http://www.google.com"));<br />}<br />47<br />
  56. 56. ADOBE FLASH - INICIACION A ACTIONSCRIPT<br />PROGRAMANDO CON FLASH<br />EVENTOS<br />Ejercicio 7<br />Vamos a crear la siguiente animación:<br />48<br />

×