IMM 2006 1

ActionScript IIActionScript para Flash MX

Sham Bhangal, Ben Renow-ClarkeAnaya Multimedia 2003

Flash MX 2004 ActionScriptDerek franklin, JobeMakarAnaya 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.flamouse_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

Método Descripción Sound.attachSound() Asocia el sonido especificado en el parámetro.

Sound.getBytesLoaded() Devuelve el número de bytes cargados para el sonido especificado.

Sound.getBytesTotal() Devuelve el tamaño del sonido en bytes.

Sound.getPan() Devuelve el valor de la llamada setPan() anterior.

Sound.getTransform() Devuelve el valor de la llamada setTransform() anterior.

Sound.getVolume() Devuelve el valor de la llamada setVolume() anterior.

Sound.loadSound() Carga un archivo MP3 en Flash Player.

Sound.setPan() Establece el balance izquierda/derecha del sonido.

Sound.setTransform() Establece el valor de cada canal, izquierdo y derecho, que debe reproducirse en cada altavoz.

Sound.setVolume() Establece el nivel de volumen de un sonido.

Sound.start() Comienza a reproducir un sonido desde el principio u opcionalmente desde un punto de desplazamiento establecido en el parámetro.

Sound.stop() Detiene el sonido especificado o todos los sonidos que se están reproduciendo actualmente.

IMM 2006 11

Resumen de propiedades, controladores de eventos

Propiedad Descripción Sound.duration Duración de un sonido, expresada en milisegundos.

Sound.ID3 Proporciona acceso a los metadatos que forman parte de un archivo MP3.

Sound.position Número de milisegundos durante los que se ha reproducido el sonido.

Controlador de eventos Descripción Sound.onID3 Se invoca cada vez que existen nuevos datos ID3 disponibles.

Sound.onLoad Se invoca cuando se carga un sonido.

Sound.onSoundComplete Se invoca cuando se detiene la reproducción de un sonido.

Constructor:

target = new Sound ()

IMM 2006 12

La clase Key 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;

} }

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

Método Descripción

Key.addListener() Registra un objeto para que reciba una notificación cuando se invoquen los métodos onKeyDown y onKeyUp.

Key.getAscii() Devuelve el valor ASCI I de la última tecla presionada.

Key.getCode() Devuelve el código de tecla virtual de la última tecla presionada.

Key.isDown() Devuelve true si se presiona la tecla especificada en el parámetro.

Key.isToggled() Devuelve true si está activada la tecla Bloq Num o Bloq Mayús.

Key.removeListener() Elimina un objeto registrado previamente con Key.addListener().

IMM 2006 14

Propiedad 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

IMM 2006 15

Resumen de detectores de la clase Key

Método Descripción

Key.onKeyDown Recibe notificación cuando se presiona una tecla.

Key.onKeyUp Recibe notificación cuando se suelta una tecla.

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

Métodos

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()

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 Alertimport 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:

Evento Descripción onClick Se ejecuta cuando clicamos sobre el componente. onChange Se ejecuta cuando cambiamos algo en el componente. onProgress Se ejecuta cuando el contenido se esta cargando. onComplete Se ejecuta cuando el contenido se ha cargado. onScroll Se ejecuta cuando utilizamos el scroll en nuestro componente.

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.

Tipo de archivo Extensión Audio Video Interleaved .avi Digital Video .dv Motion Picture Experts Group .mpg, .mpeg Película QuickTime .mov

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

1. Abrimos nuestro Macromedia Flash 2004 y apretamos <ctrl>+F7

2. Se verá la ventana de Componentes, le damos al (+) de MEDIA COMPONENTES y arrastramos al escenario o stage el componente MEDIAPLAYBACK.

3. Teniendo seleccionado el componente apretamos <alt>+F7

4. Se verá la ventana del Inspector de Componentes, teniendo la pestaña Parámetros seleccionada podemos escoger entre FLV o MP3, le damos FLV

5. 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

6. Y ahora corre tu Flash, listo, ya funciona

IMM 2006 35

ActionScript

1. Abrimos nuestro Macromedia Flash 2004 y apretamos <ctrl>+ L, para abrir la librería o biblioteca

2. Y en la pestaña superior derecha de la ventana le damos a NUEVO VIDEO

3. Vemos que en la librería apareció un objeto nuevo con nombre por defecto “Video Incorporado”

4. Arrastramos este objeto a nuestro escenario y le colocamos nombre de instancia “mi_video”

5. 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:

1. Elegimos cinco botones de la bilbioteca común de botones.

2. Los seleccionamos y creamos un clip de pelicula denominado videocontrols.

3. Editamos videocontrols y le añadimos una capa de acciones.

4. Escribimos el siguiente código en el primer fotograma de la capa acciones de videocontrols.

IMM 2006 37

Crear un componente IIplay_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;};

IMM 2006 38

Crear un componente III

5. 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.

6. 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.