1 / 38

ActionScript II

ActionScript II. ActionScript para Flash MX Sham Bhangal, Ben Renow-Clarke Anaya Multimedia 2003 Flash MX 2004 ActionScript Derek franklin, JobeMakar Anaya Multimedia. 2003. http://www.cristalab.com/tutoriales/. Índice. El Sonido. La clase Key. La clase Date. La clase Math.

dena
Download Presentation

ActionScript II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ActionScript II ActionScript para Flash MX Sham Bhangal, Ben Renow-Clarke Anaya Multimedia 2003 Flash MX 2004 ActionScript Derek franklin, JobeMakar Anaya Multimedia. 2003. http://www.cristalab.com/tutoriales/ IMM 2006

  2. Índice • El Sonido. • La clase Key. • La clase Date. • La clase Math. • Interfaz de Dibujo. • Componentes. • Vídeo. IMM 2006

  3. EL sonido • El sonido se asocia a un fotograma y empieza a reproducirse cuando se entra en el fotograma clave en el que se insertó. IMM 2006

  4. Asignar Sonido a Botones • Se edita un botón de la biblioteca de botones. • Se añade una nueva capa y un fotograma clave en aquellos estados en los que deseemos establecer un sonido. • Arrastrar el sonido desde la biblioteca o mejor utilizar las propiedades y asignar un sonido. • El sonido debe estar asociado a algo. IMM 2006

  5. Usar objetos de sonido: ActionScript • Pasos • Definir el objeto de sonido. • Adjuntar la información de sonido al objeto. • Utilizar los métodos del sonido para controlar como y cuando se reproduce el objeto. • P.e. el uso de: • onSoundComplete(): que detecta cuando se ha acabado el sonido. • loadSound(): Carga archivos de sonido en películas mientras estas están reproduciendose, desde un archivo externo. • attachSound(): lo carga desde la biblioteca. IMM 2006

  6. La vinculación • Al importar un sonido en la biblioteca, tendrá un nombre, pero además precisa de un identificador para ActionScript. Así un sonido posee hasta tres nombres, el del archivo que procede, el de la biblioteca y el identificador de ActionScript. • Para poder cargarlo en un objeto Sound, se selecciona de la biblioteca y se pulsa el botón derecho del ratón para ver el menú de Vinculación. Allí se especifica Exportar para ActionScript y en el primer fotograma. • Ahora ya podemos escribir el código: IMM 2006

  7. Código SoundObject.fla mouse_sound = new Sound(); mouse_sound.attachSound("Transition"); onMouseDown = function() { mouse_sound.start(0, 1); //El 1 indica una sóla vez, el cero que empiece //El 0 que empiece desde el segundo cero. }; Hay un problema si pulsamos varias veces sobre la pantalla escucharemos al mismo tiempo varias versiones del sonido. Para ello podemos incluir antes del mouse_sound.star() la instrucción: mouse_sound.stop(); O emplear onSoundComplete para no montar el sonido y escucharlo por completo. IMM 2006

  8. Código SoundObject.fla mouse_sound = new Sound(); mouse_sound.attachSound("Transition"); soundFinished = true; mouse_sound.onSoundComplete = function() { soundFinished = true; }; onMouseDown = function() { if (soundFinished) { mouse_sound.start(0, 1); //El 1 indica una sóla vez, el cero que empiece //El 0 que empiece desde el segundo cero. soundFinished = false; } }; IMM 2006

  9. Controlando los sonidos desde ActionScript • setVolume(valor): Entre 0 y 100; • setPan(valor): Entre -100 y 100; • Ejemplo controls.fla • Emplearemos el startdrag para mover un punto por pantalla y en función de su posición se escuchará el sonido de una u otra forma. startDrag() Sintaxis: startDrag(target,[lock, left, top, right, bottom]) Parámetros: target Ruta de destino del clip de película que desea arrastrar. lock Valor booleano que especifica si el clip de película arrastrable está bloqueado en el centro de la posición del ratón (true) o en el punto en el que el usuario hizo clic por primera vez en el clip de película (false). Este parámetro es opcional. left, top, right, bottom Valores relativos a las coordenadas del elemento principal del clip de película que especifican un rectángulo de limitación para el clip de película. Estos parámetros son opcionales. IMM 2006

  10. Resumen de métodos para la clase Sound IMM 2006

  11. Resumen de propiedades, controladores de eventos Constructor: target = new Sound () IMM 2006

  12. Se emplea para crear una interfaz que pueda ser controlada por cualquier usuario con un teclado estándar. Las propiedades de la clase Key son constantes que representan las teclas que se utilizan con mayor frecuencia para controlar juegos. Este código de la izquierda no sería posible pues solo puede haber un código para un evento en un mismo clip. El de la derecha si. onEnterFrame = function() { if(Key.isDown(Key.RIGHT)) { circulo_mc._x +=1; } } onEnterFrame = function() { if(Key.isDown(Key.LEFT)) { circulo_mc._x -=1; } } La clase Key onEnterFrame = function() { if(Key.isDown(Key.RIGHT)) { circulo_mc._x +=1; } if(Key.isDown(Key.LEFT)) { circulo_mc._x -=1; } } IMM 2006

  13. Resumen de métodos para la clase Key IMM 2006

  14. Key.BACKSPACE Key.CAPSLOCK Key.CONTROL Key.DELETEKEY Key.DOWN Key.END Key.ENTER Key.ESCAPE Key.HOME Key.INSERT Key.LEFT Key.PGDN Key.PGUP Key.RIGHT Key.SHIFT Key.SPACE Key.TAB Key.UP Propiedad IMM 2006

  15. Resumen de detectores de la clase Key IMM 2006

  16. Ejemplo de movimiento onEnterFrame = function() { if(Key.isDown(Key.RIGHT)) { circulo_mc._x +=1; } if(Key.isDown(Key.LEFT)) { circulo_mc._x -=1; } if (Key.isDown(Key.UP)) { circulo_mc._y -=1; } if (Key.isDown(Key.DOWN)) { circulo_mc._y +=1; } } IMM 2006

  17. La clase Date • La clase Date permite recuperar valores de fecha y hora relativos a la hora universal. • El ejemplo siguiente recupera la fecha y la hora actuales. now_date = new Date(); • En el ejemplo siguiente se crea un nuevo objeto Date para el día en que nació Gary: el 12 de agosto de1974. El parámetro de mes es de base cero, por lo que para el mes se utiliza 7 en lugar de 8. garyBirthday_date = new Date (74, 7, 12); • En el ejemplo siguiente se crea un nuevo objeto Date, se concatenan los valores devueltos de Date.getMonth(), Date.getDate() y Date.getFullYear() y se visualizan en el campo de texto especificado por la variable date_str. today_date = new Date(); date_str = ((today_date.getMonth() + 1) + "/" + today_date.getDate() + "/" + today_date.getFullYear()); IMM 2006

  18. La clase Math • Permite acceder a constantes y funciones matemáticas y manipularlas. Todas las propiedades y métodos de la clase Math son estáticos y deben llamarse utilizando la sintaxis Math.method(parameter) o Math.constant. • En ActionScript, las constantes se definen con la máxima precisión de números con coma flotante IEEE-754 de doble precisión. • Algunos de los métodos de la clase Math utilizan radianes de un ángulo como parámetro. Puede utilizar la ecuación siguiente para calcular valores en radianes o sencillamente pasar la ecuación (introduciendo un valor para grados) para el parámetro en radianes. • Para calcular un valor en radianes, utilice esta fórmula: radián = Math.PI/180 * grado • A continuación, se muestra un ejemplo para pasar una ecuación como parámetro para calcular el seno de un ángulo de 45 grados: Math.SIN(Math.PI/180 * 45) es lo mismo que Math.SIN(.7854) IMM 2006

  19. Math.abs() Math.acos() Math.asin() Math.atan() Math.atan2() Math.ceil() Math.cos() Math.exp() Math.floor() Math.log() Math.max() Math.min() Math.pow() Math.random() Math.round() Math.sin() Math.sqrt() Math.tan() Métodos IMM 2006

  20. Constantes • Math.E • Math.LN2 • Math.LOG2E • Math.LN2 • Math.LOG10E • Math.PI • Math.SQRT1_2 • Math.SQRT2 IMM 2006

  21. Interfaz de Dibujo • Lineas, curvas y rellenos. • Necesitamos crear un papel virtual que va a ser un clip de película: _root. MovieClip.createEmptyMovieClip(“paper”,100); • Parámetros • instanceName Cadena que identifica el nombre de instancia del clip de película nuevo. • depth Número entero que especifica la profundidad del clip de película nuevo. • Se creará en el punto 0,0 a no ser que lo movamos. • A continuación definimos la pluma: paper.lineStyle(3, 0xFF0000, 100); IMM 2006

  22. .LineStyle Parámetros • thickness Número entero que indica el grosor de la línea en puntos; los valores válidos oscilan entre 0 y 255. Si no se especifica ningún número o si el parámetro es undefined, no se dibuja ninguna línea. Si se especifica un valor menor que 0, Flash utiliza 0. El valor 0 indica un grosor muy fino; el grosor máximo es 255. Si se especifica un valor superior a 255, el intérprete de Flash utiliza 255. • rgb Valor de color hexadecimal de la línea (por ejemplo, rojo es 0xFF0000, azul es 0x0000FF, etc.). Si no se indica ningún valor, Flash utiliza el valor 0x000000 (negro). • alpha Número entero que indica el valor alfa del color de la línea; los valores válidos oscilan entre 0 y 100. Si no se indica ningún valor, Flash utiliza 100 (sólido). Si el valor es inferior a 0, Flash utiliza 0; si el valor es superior a 100, Flash utiliza 100. IMM 2006

  23. Movernos al punto de partida y dibujar una línea • papel.moveTo (50,50); • papel.lineTo(100,100); • Resumiendo: _root.createEmptyMovieClip("paper", 100); paper.lineStyle(3, 0xFF0000, 100); paper.moveTo(50, 50); paper.lineTo(100,100); • Ver ejemplo con _xmouse e y_mouse, (linea1.fla) • Para limpiar la pantalla paper.clear(); • Si quitamos el moveTo se crea una línea continua con _xmouse y el y_mouse IMM 2006

  24. Curvas • Idem con curveTo. my_mc.curveTo(controlX, controlY, anchorX, anchorY) • 4 Parámetros • controlX Número entero que especifica una posición horizontal relativa al punto de registro del clip de película principal del punto de control. • controlY Número entero que especifica una posición vertical relativa al punto de registro del clip de película principal del punto de control. • anchorX Número entero que especifica una posición horizontal relativa al punto de registro del clip de película principal del siguiente punto de anclaje. • anchorY Número entero que especifica una posición vertical relativa al punto de registro del clip de película principal del siguiente punto de anclaje. • Ejemplo curve1 con _xmouse e y_mouse IMM 2006

  25. Rellenar • beginFill y endFill, • my_mc.beginFill([rgb[, alpha]]) ; • my_mc.endFill(); //p.e. rellenar un cuadrado: createEmptyMovieClip("paper", 100); paper.lineStyle(3, 0x000000, 100); paper.beginFill(0xFF0000, 100); paper.moveTo(100, 100); paper.lineTo(200, 100); paper.lineTo(200, 200); paper.lineTo(100, 200); paper.endFill(); IMM 2006

  26. Componentes • Los componentes son clips de película con parámetros que permiten modificar la apariencia y el comportamiento. • Puede ser desde un sencillo control de interfaz de usuario como un botón de opción o una casilla de verificación, hasta un elemento con contenido, como un panel de desplazamiento. • Cada componente dispone de parámetros predefinidos que se pueden establecer mientras se edita en Flash. Asimismo, cada uno dispone de un conjunto único de métodos, propiedades y eventos de ActionScript, llamado también API (interfaz de programación de aplicaciones), que permite definir parámetros y opciones adicionales en tiempo de ejecución. • http://www.cristalab.com/tutoriales/4-componentes/ IMM 2006

  27. Componentes • Se dividen en cinco categorías: • Los componentes de la interfaz de usuario permiten interactuar con una aplicación. Por ejemplo, los componentes RadioButton, CheckBox y TextInput son controles de la interfaz de usuario. • Los componentes de datos permiten cargar y manipular la información de las fuentes de datos; los componentes WebServiceConnector y XMLConnector son componentes de datos. • Los componentes de medios permiten reproducir y controlar flujos de medios. MediaController, MediaPlayback y MediaDisplay son los componentes de medios. • Los administradores son componentes que no se ven y que permiten gestionar una función (por ejemplo, selección o profundidad) en una aplicación. FocusManager, DepthManager, PopUpManager y StyleManager son los componentes de administrador que se incluyen con Flash MX 2004 y Flash MX Professional 2004. • La categoría de pantallas incluye las clases de ActionScript que permiten controlar formularios y diapositivas IMM 2006

  28. Ejemplo con Alert import mx.controls.Alert; Alert.show("Texto de la ventana", "Titulo de la ventana", Alert.OK | Alert.CANCEL, this, "prueba", Alert.OK); • show() • Texto de la ventana: Pues eso, el texto que saldrá en la ventana. • Titulo de la ventana: El titulo de la ventana. Este parámetro es opcional. • Botones a mostrar: Podemos mostrar Alert.OK, Alert.CANCEL, Alert.YES y Alert.NO. Debemos mostrar como mínimo uno, y como máximo los que quieras. Tenemos que usar el símbolo | para añadir más de uno. • Emplazamiento: Lugar donde se va a crear la ventana Alert. Podemos poner null o undefined para que se haga en el _root de la película. Este parámetro es opcional. • Manejador del evento click: Nombre del objeto listener que escuchará el evento click. • Icon: Nombre del identificador de un clip de película para mostrar en la ventana. • Botón predeterminado: Botón que se pulsará cuando pulsemos la tecla Enter. Puede ser uno de los cuatro botones a mostrar. • Para que funcione debe de estar en la biblioteca del fichero el componente Alert, lo arrastramos al escenario y luego lo borramos. IMM 2006

  29. Código con listener import mx.controls.Alert; alClicar = new Object(); alClicar = function (evento) {if (evento.detail == Alert.OK) { trace("Has pulsado OK");} else if (evento.detail == Alert.CANCEL) { trace("Has pulsado Cancel");} }; Alert.show("Texto de la ventana", "Titulo de la ventana", Alert.OK | Alert.CANCEL, this, alClicar, "prueba", Alert.OK); IMM 2006

  30. El uso de Listeners • Empleando Listeners podemos capturar los eventos de los componente, estos pueden ser: Estos eventos no se podrán utilizar en todos los componentes, al igual que nos pasaba a la hora de personalizar nuestros componentes, si nuestro componente Button, no tiene barra de scroll, obviamente no podremos usar el evento onScroll. Para utilizar los eventos podemos usarlos configurando las acciones en el mismo componente, al igual que podemos hacer con los clips de película o los botones. IMM 2006

  31. Ejemplo • si queremos adjuntar dinámicamente un componente Button, y queremos agregarle las acciones al fotograma 1, nos daremos cuenta de que no podremos llamar a los eventos como si fuese un clip de película o un botón attachMovie("Button", "boton_comp", 1); al_clicar = new Object(); al_clicar.click = function() {trace("Me has pulsado!!"); }; boton_comp.addEventListener("click", al_clicar); IMM 2006

  32. El video en Flash • Streamming: forma parte de este paquete permitiendo así la reproducción de audio y video de una manera fácil y sencilla, sin necesidad de reproductores y/o plug-ins adicionales. • Tipos de Archivos. • Podemos convertirlo en el formato flv (codec sorenson vídeo). Sorenson Spark es un códec de vídeo en movimiento incluido en Flash que permite añadir contenido de vídeo incorporado a Flash. Spark es un codificador/decodificador de vídeo de alta calidad que disminuye enormemente el ancho de banda necesario para publicar imágenes en Flash y, al mismo tiempo, aumenta la calidad de vídeo. IMM 2006

  33. Importar/Exportar • Pasos: • Importar un vídeo a escenario/biblioteca, una vez esta en la biblioteca se hace doble click sobre el y se exporta. • Una vez exportado ya tiene extensión flv. • Bien, tenemos nuestro FLV y ahora tenemos que reproducirlo, para eso hay dos formas básicas de hacerlo, podemos usar el componente MediaPlayBack o ActionScript puro, lo haremos de las dos formas. IMM 2006

  34. Componentes • Abrimos nuestro Macromedia Flash 2004 y apretamos <ctrl>+F7 • Se verá la ventana de Componentes, le damos al (+) de MEDIA COMPONENTES y arrastramos al escenario o stage el componente MEDIAPLAYBACK. • Teniendo seleccionado el componente apretamos <alt>+F7 • Se verá la ventana del Inspector de Componentes, teniendo la pestaña Parámetros seleccionada podemos escoger entre FLV o MP3, le damos FLV • En URL colocamos la dirección de nuestro archivo FLV (a Macromedia Flash 2004 le falto un examinar, pero bueno, seguimos), si esta en el mismo nivel nuestro SWF actual y el video, solo ponemos: video.flv y si está en una carpeta le ponemos: mi_carpeta/video.flv • Y ahora corre tu Flash, listo, ya funciona IMM 2006

  35. ActionScript • Abrimos nuestro Macromedia Flash 2004 y apretamos <ctrl>+ L, para abrir la librería o biblioteca • Y en la pestaña superior derecha de la ventana le damos a NUEVO VIDEO • Vemos que en la librería apareció un objeto nuevo con nombre por defecto “Video Incorporado” • Arrastramos este objeto a nuestro escenario y le colocamos nombre de instancia “mi_video” • Para esta forma de cargar un video FLV usaremos el siguiente código: var conexion:NetConnection = new NetConnection(); conexion.connect(null); var stream:NetStream = new NetStream(conexion); mi_video.attachVideo(stream); stream.play("video.flv"); IMM 2006

  36. Crear un componente • P.e. unos controles de reproducción para cualquier clip de pelicula que se aplique: • Elegimos cinco botones de la bilbioteca común de botones. • Los seleccionamos y creamos un clip de pelicula denominado videocontrols. • Editamos videocontrols y le añadimos una capa de acciones. • Escribimos el siguiente código en el primer fotograma de la capa acciones de videocontrols. IMM 2006

  37. play_btn.onRelease = function() { _parent.play(); }; stop_btn.onRelease = function() { _parent.stop(); }; pause_btn.onPress = function() { _parent.stop(); }; pause_btn.onRelease = function() { _parent.gotoAndStop(_parent._currentframe+1); }; fastforward_btn.onPress = function() { onEnterFrame = function () { _parent.gotoAndStop(_parent._currentframe+3); }; }; fastForward_btn.onRelease = function() { onEnterFrame = undefined; }; rewind_btn.onPress = function() { onEnterFrame = function () { _parent.gotoAndStop(_parent._currentframe-5); }; }; rewind_btn.onRelease = function() { onEnterFrame = undefined; }; Crear un componente II IMM 2006

  38. Crear un componente III • Antes de acabar debemos de definir videocontrols como un componente, para ello lo seleccionamos de la biblioteca y con el botón derecho seleccionamos Definición de componente. • Ahora podemos emplear este componente en cualquier línea de tiempo o en cualquier .fla, es decir que no tiene porque ser en la misma película. IMM 2006

More Related