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
1
Índice







El Sonido.
La clase Key.
La clase Date.
La clase Math.
Interfaz de Dibujo.
Componentes.
Vídeo.
IMM 2006
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
Resumen de métodos para la
clase Sound
Método
Sound.attachSound()
Descripción
Asocia el sonido especificado en el parámetro.
Sound.getBytesLoaded()
Sound.getBytesTotal()
Devuelve el número de bytes cargados para el sonido
especificado.
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.
Detiene el sonido especificado o todos los sonidos que se están
reproduciendo actualmente.
Sound.stop()
IMM 2006
10
Resumen de propiedades,
controladores de eventos
Propiedad
Sound.duration
Descripción
Duración de un sonido, expresada en milisegundos.
Sound.ID3
Proporciona acceso a los metadatos que forman parte
de un archivo MP3.
Número de milisegundos durante los que se ha
reproducido el sonido.
Sound.position
Controlador de eventos
Sound.onID3
Descripción
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
11
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
12
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 ASCII 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
13
Propiedad










Key.BACKSPACE
Key.CAPSLOCK
Key.CONTROL
Key.DELETEKEY
Key.DOWN
Key.END
Key.ENTER
Key.ESCAPE
Key.HOME
Key.INSERT








IMM 2006
Key.LEFT
Key.PGDN
Key.PGUP
Key.RIGHT
Key.SHIFT
Key.SPACE
Key.TAB
Key.UP
14
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
15
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
16
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
17
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
18
Métodos









Math.abs()
Math.acos()
Math.asin()
Math.atan()
Math.atan2()
Math.ceil()
Math.cos()
Math.exp()
Math.floor()









IMM 2006
Math.log()
Math.max()
Math.min()
Math.pow()
Math.random()
Math.round()
Math.sin()
Math.sqrt()
Math.tan()
19
Constantes








Math.E
Math.LN2
Math.LOG2E
Math.LN2
Math.LOG10E
Math.PI
Math.SQRT1_2
Math.SQRT2
IMM 2006
20
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
21
.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
22
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
23
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
24
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
25
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
26
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
27
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
28
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
29
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
30
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
31
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.
Tipo de archivo
Extensión
Audio Video Interleaved
.avi
Digital Video
.dv
Motion Picture Experts Group .mpg, .mpeg
Película QuickTime
.mov

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
32
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
33
Componentes
1.
2.
3.
4.
5.
6.
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
34
ActionScript
1.
2.
3.
4.
5.
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
35
Crear un componente
P.e. unos controles de reproducción para
cualquier clip de pelicula que se aplique:

1.
2.
3.
4.
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
36
Crear un componente II
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._currentfr
ame+3);
};
};
fastForward_btn.onRelease = function() {
onEnterFrame = undefined;
};
rewind_btn.onPress = function() {
onEnterFrame = function () {
_parent.gotoAndStop(_parent._currentfr
ame-5);
};
};
rewind_btn.onRelease = function() {
onEnterFrame = undefined;
};
IMM 2006
37
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.
IMM 2006
38
Descargar

ActionScript II