Vale 11

Valentina González Martínez
11-01
Profesor: Carlos herrera

Introducción a Action
Script 3.0
• El Action Script es el lenguaje de programación que ha
utilizado Flash desde sus comienzos, y que por supuesto,
emplea Flash CS5. A grandes rasgos, podemos decir que el
Action Script nos permitirá realizar con Flash CS5 todo lo
que nos propongamos, ya que nos da el control absoluto de
todo lo que rodea a una película Flash. Absolutamente de
todo.
• Sin embargo, en estos temas sólo vamos a ver una pequeña
introducción a Action Script 3 que servirá para sentar las
bases que permitirán empezar a trabajar con Action Script.
Enseñar a programar con Action Script requeriría otro curso
completo. Profundizar en el conocimiento de este lenguaje
queda por cuenta del lector. Recomendamos seguir la
estupenda Ayuda incluida en Flash CS5.

Características
generales
• ActionScript es, como su nombre indica, un lenguaje de script,
esto quiere decir que no hará falta crear un programa
completo para conseguir resultados, normalmente la
aplicación de fragmentos de código ActionScript a los objetos
existentes en nuestras películas nos permiten alcanzar
nuestros objetivos.
• ActionScript 3 es un lenguaje de programación orientado a
objetos. Tiene similitudes, por tanto, con lenguajes tales como
los usados en el Microsoft Visual Basic, en el Borland Delphi
etc... y aunque, evidentemente, no tiene la potencia de estos
lenguajes, cada versión se acerca más. Así, la versión 3.0
utilizada en Flash CS5 es mucho más potente y mucho más
"orientada a objetos" que su anterior versión 2.0.

• La sintaxis ActionScript presenta muchísimos
parecidos con el Javascript o PHP; si estamos
familiarizados con estos lenguajes, la sintaxis y el
estilo de ActionScript nos resultarán muy familiares.
Las diferencias entre JavaScript y ActionScript las
podemos encontrar en la ayuda que acompaña al
Flash CS5.
• En la mayor parte de las ocasiones, será necesario
"programar". Flash CS5 pone a nuestra disposición
una biblioteca de funciones, clases y métodos (de
momento entenderemos esto como "código
ActionScript que realiza una función determinada")
ya implementadas que realizan lo que buscamos,
bastará con colocarlas en el lugar adecuado.

El panel Acciones

• En Flash CS5, el Panel Acciones sirve para programar
scripts con Action Script, por tanto lo aquí
introduzcamos le afectará de menor o mayor
medida. Debemos tener claro desde un principio que
el Panel Acciones puede hacer referencia a
Fotogramas u objetos, de modo que el código Action
Script introducido afectará tan sólo a aquello a lo que
referencia el Panel.

• El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda
facilitada por Flash que nos da acceso de un modo rápido y muy cómodo a
todas las acciones, objetos, propiedades etc... que Flash tiene
predefinidos. Estos elementos están divididos en carpetas, que contienen
a su vez más carpetas clasificando de un modo eficaz todo lo que Flash
pone a nuestra disposición. Para insertarlos en nuestro script bastará con
un doble clic sobre el elemento elegido.
• El Panel Acciones de Flash CS5, no tiene únicamente un modo de edición.
Podemos utilizar el , en el que en vez de escribir directamente,
seleccionamos los distintos elementos desde listas. Puede resultar útil al
principio, cuando aún no estamos familiarizados, pero nos limita mucho al
escribir.
• Cuando ya tenemos cierta soltura nos encontraremos más cómodos con el
Asistente de script desactivado, lo que nos permite escribir directamente
el código. Este último modo nos dará más libertad y agilidad si sabemos
qué hacer, pero también es más fácil que cometamos errores.
•

• Aunque la sintaxis sea correcta, puede que al probar nuestra película se sigan
produciendo errores (errores de compilación). Por ejemplo porque accedemos a una
propiedad de un objeto que no existe, o nos hemos equivocado al escribir el nombre de
una variable. Estos errores también nos aparecerán en el panel Errores de compilador.
En este caso, fíjate en el número de línea del error, ya que al hacer doble clic, a veces no
va al lugar correcto si el código tiene comentarios.

• Buscar: Busca un texto en el código. Útil, por ejemplo, si queremos buscar en todos los
sitios que empleamos un objeto. Revisar sintaxis. Comprobará errores en la sintaxis,
normalmente que hayamos olvidado cerrar paréntesis o corchetes. Si encuentra alguno,
nos mostrará un mensaje como el siguiente:
• En el panel Errores de compilador se mostrarán los errores indicando la capa, fotograma
y línea. Podemos ir al lugar del error haciendo doble clic. Formato automático. Al
escribir en cualquier lenguaje, es muy importante hacerlo ordenadamente y con el
formato adecuado. Este botón lo hace automáticamente, siempre que no haya errores
de sintaxis. Cuando tenemos mucho código, nos resultará más cómodo si contraemos
ciertas partes. Con estos botones, podemos, de izquierda a derecha, contraer el espacio
entre llaves, contraer la selección o expandir todo. Cuando estamos programando, es
frecuente que queramos comentar un fragmento de código para que no se ejecute o
que queramos añadir comentarios descriptivos. Con estos botones, podemos comentar
el texto seleccionado, o descomentarlo.

El panel Fragmentos de código

• Este panel nos resultará muy útil, ya que incluye las
funciones básicas. Por ejemplo, los eventos de
botones siempre se escriben de la misma forma.
Desde la sección Controladores de eventos del panel,
podemos introducir este código, y sólo modificar la
parte necesaria.
• Pero además accediendo a sus opciones
encontramos opciones muy interesantes:

Los operadores y
expresiones
• Entrando un poco más a fondo en la sintaxis y el manejo del ActionScript, vamos a
comenzar hablando de los operadores y de las expresiones, por ser la parte más
elemental de una acción de ActionScript (y de cualquier otro lenguaje de
programación).
• Un operador es un tipo de carácter que realiza una acción especial dentro de una
expresión de ActionScript. Una expresión no es más que un conjunto de
operadores, variables y constantes relacionados entre sí de un cierto modo.
• x = 3 ; --> Es una expresión cuyo resultado será asignarle a la variable ' x ' el
valor 3 (que es una constante). A partir de este punto, la variable x vale 3.
• y = 5 + x ; --> Es una expresión cuyo resultado será asignarle a la variable ' y ' la
suma de la constante 5 y la variable ' x ' que sabemos que vale 3 (porque le
hemos asignado este valor antes). Por tanto, el resultado de esta expresión es
asignarle 8 a y. También se puede considerar como asignar a y el valor de la
expresión 5 + x
• Flash nos permite usar multitud de operadores, vamos a comentar los más
comunes. El lector puede acceder a los demás (y a estos) desde el Panel
Acciones en la carpeta Elementos de lenguaje → Operadores. Vamos a
clasificar los operadores tal y cómo lo hace Flash.

Operadores
Aritméticos
Operador Descripción Ejemplo + Suma 5 + 5 = 10
- Resta 5 - 5 = 0 * Multiplicación 5 * 5 = 25 /
División 5 / 5 = 1 % Resto o Módulo 10%8 = 2
++ Incremento. Suma 1 al valor valor++
equivaldría a valor = valor + 1 -- Decremento.
Resta 1 al valor valor-- equivaldría a valor =
valor

Operadores de
Asignación
• Operador Descripción Ejemplo = Asigna a la variable de la izquierda
el valor de la derecha variable vale 3;
variable = 5;
variable vale 5; += Suma con asignación. Le añade a la variable el
valor de la derecha. variable vale 3;
variable += 5;
variable vale 8; -= Resta con asignación. Le resta el valor de la
derecha. variable vale 3;
variable -= 5;
variable vale -2; *= Multiplicación con asignación. variable vale 3;
variable *= 5;
variable vale 15; /= División con asignación variable vale 15;
variable /= 5;
variable vale 3;

Operadores de
Comparación
• Operador Descripción Ejemplo > Mayor que 6
> 5 da verdadero. < Menor que 6 < 5 da falso.
>= Mayor o igual que 6 >= 5 da verdadero. <=
Menor o igual que 6 >= 6 da verdadero. ==
Igual 'hola' == 'hola' da verdadero. != Distinto
'hola' != 'hola' da falso.

Los objetos

• Los Objetos, como ya hemos visto en el tema
básico, los objetos son instancias de una
determinada clase. Esto es, son
representantes de una clase ya definida. Cada
objeto tiene las propiedades y métodos
propios de la clase, y normalmente son
independientes unos de otros. Así, son
objetos, por ejemplo, un botón, un clip de
película, un gráfico o un sonido... es decir, que
prácticamente todo es un objeto en Flash CS5.

Objeto "Button" (Botón)
• Los objetos de tipo Botón es un tipo de MovieClip
especialmente pensado para que el usuario
interactúe con él, permitiéndonos diferenciar
entre sus estados, y crear una apariencia para
cada uno.
Cuando nos interese que una imagen que
hayamos diseñado se comporte como un botón,
bastará convertirla a botón (del modo visto en el
capítulo correspondiente) y ya podremos usar los
eventos típicos de un botón.

Objeto "MovieClip" (Clip
de Película)
• Cuando necesitemos crear una película Flash dentro de
otra película, pero no queramos tener 2 ficheros
separados ni molestarnos en cargar una película u otra,
deberemos crear un objeto movieclip. Entre sus
propiedades especiales destaca que los objetos "clip de
película" tienen, internamente, una línea de tiempos
que corre independiente de la línea de tiempos de la
película principal de Flash, lo que nos permite crear
animaciones tan complejas e independientes como
queramos (podemos crear tantos clips de película
dentro de otros como queramos, por ejemplo).
Realmente, toda nuestra película es un MovieClip.

Objeto "Display Object"
(Objeto de
visualización)
• Esta clase engloba a todos los objetos que
podemos ver en nuestra película, como los
Clips de película y botones, y define las
propiedades y métodos comunes para todos
ellos.

Objeto "Sound" (Sonido) y SoundChanel
(Canal de sonido)

• Los objetos sonidos no son visuales, y por tanto,
no podremos ver como quedan en los
fotogramas, al igual que haríamos con un botón o
un clip de película. Deberemos controlarlos, por
tanto, desde el Panel Acciones y usando
ActionScript. Tienen multitud de métodos
especiales, muy potentes y útiles, podemos parar
un sonido, crear un bucle, darle efectos sonoros
etc... Utilizando el canal de sonido, podremos
pararlo, ajustar el volumen, etc.

Objeto "Mouse" (Ratón)
• El objeto mouse es uno de los objetos de Flash que ya está
definido por Flash, pues hace referencia al ratón de
Windows (al que manejará el usuario que vea nuestra
película). Si lo usamos, podremos acceder a las
propiedades del ratón de Windows, tipo de cursos, efectos
asociados, detección de su posición etc...
Vale la pena insistir en que su manejo no es análogo al de
otros objetos como el botón, pues podemos crear tantos
botones como queramos y hacer con ellos lo que
decidamos, pero el objeto Mouse es único y actúa sobre el
ratón del PC del usuario que vea nuestra película. Se puede
decir que es un objeto "externo" que permite que otras
partes del Sistema Operativo interactúen con nuestra
película Flash. Por tanto, es muy potente.

Objeto "Math"
(Matemáticas)
• Es uno de los múltiples objetos "abstractos"
de Flash, ni es visual, ni parece que
corresponda a nada existente en el sistema
(como el objeto "Mouse"). Su función es muy
importante, pues nos permite usar fórmulas
matemáticas de modo muy sencillo. En el
tema siguiente veremos algún ejemplo de su
uso.

Objeto "String"
(Cadena)
• Es otro objeto peculiar, pues corresponde a un
tipo de datos. Los strings o cadenas son
secuencias de caracteres. Si definimos una
secuencia de caracteres como objeto de tipo
String, podremos usar los métodos que Flash
implementa sobre ellas: Seleccionar
subcadenas de letras, buscar una determinada
letra en una palabra, convertir la palabra a
letras mayúsculas y un largo etc...

Objeto "Loader" (Cargador) y Objeto
"URLLoader" (Cargador de información)

• Los objetos Loader nos permitirán cargar
archivos para mostrarlos (imágenes,
archivos swf, etc...) en nuestra película,
mientras que los objetos URLLoader nos
permitirán cargar información de
archivos (archivos de texto, XML, páginas
web...).

Ejemplos de
ActionScript 3.0
1.alert()
2.La forma de tratar eventos, como on (event){},
onClipEvent(event){}, object.onEvent = function(){} ,
addListener , etc. La forma de tratarlos ahora es
agregando un escuchador al objeto, con el método
addEventListener, indicando el evento, y una única
función de escucha.
3.Guiones bajos ( _ ) antes del nombre de las
propiedades.
4.Variables globales (_global).
5. _root y _parent para acceder a elementos superiores.

Código ActionScript
para botones
• Los Botones (objeto Button para Flash CS5) tienen mucha utilidad
siempre que queramos que nuestra película interactúe con el
usuario. Dado que esto va a ser prácticamente siempre, es
conveniente estudiar y entender bien algunos códigos típicos que
tendremos que usar para conseguir nuestros propósitos.
• En realidad, los botones se comportan como cualquier símbolo. A
todos les podemos aplicar eventos, ya que lo que hacemos es
asociarlos normalmente al clic del ratón. Los botones tienen la
ventaja de que nos permiten representar distintos estados,
mejorando la percepción de interactividad.
• Para tener el código organizado, es mejor crear una nueva capa e
insertarlo ahí.
• Veamos algunos de ellos:

Introducción

• Esta unidad, la de Navegación, está
especialmente orientada a la web, pues
veremos cómo crear elementos que te
ayudarán más tarde a crear tus propias
presentaciones, secciones, etc. Todo ello
apoyado con animaciones y vinculadas entre
sí.
• A lo largo del tema utilizaremos este ejemplo
para ilustrar la teoría de forma guiada.

Los Botones

• Uno de los elementos que más nos van a
ayudar a la hora de añadir interactividad en el
diseño son los botones.
• En el ejemplo nos hemos ayudado de los
botones para crear la navegación entre las
diferentes secciones

• MouseEvent.CLICK: ejecuta la acción al hacer clic con el
ratón..
• MouseEvent.MOUSE_DOWN: ejecuta la acción al
presionarse el botón.

• MouseEvent.MOUSE_UP: ejecuta la acción al soltarse
el botón (después de haberlo presionado).

• MouseEvent.MOUSE_OVER: ejecuta la acción al
desplazar el cursor dentro del botón

• MouseEvent.MOUSE_OUT: ejecuta la acción al
desplazar el cursor fuera del botón.

Controladores de la
línea de tiempo
• Una vez insertados los botones y definidos los
eventos sobre los que deben actuar,
tendremos que decidir qué queremos que
hagan.
• De esta forma podremos crear dinamismo
entre nuestras secciones.
• Imagina que tenemos la siguiente línea de
tiempo:

• Observa la capa Contenido. En ella se encuentran todo el contenido
de las secciones.
• De esta forma, si no aplicásemos ninguna acción sobre la línea de
tiempo, todas las secciones se ejecutarían una seguida de la otra.
Lo que queremos conseguir es que se ejecute la primera (para
mostrar la sección principal) y el cabezal se pare hasta nueva orden
(para mostrar la segunda).
• Para ello utilizaremos la función stop().
• Esta función sirve para parar el cabezal de la línea de tiempo donde
sea colocada. Así que seleccionamos el último fotograma de la
sección y abrimos el Panel Acciones.
• Allí deberemos escribir únicamente la línea:
• De esta forma, al hacer clic sobre ese botón, el cabezal de
reproducción se desplazará hasta el fotograma que tiene la etiqueta
"Encuentranos" y reproducirá a partir de allí.
• Si añadimos un stop() en el último fotograma de la segunda sección,
cuando éste se reproduzca se parará y el contenido permanecerá
estático en espera de una nueva orden.
•
• Existe otra forma, muy útil, para nombrar los fotogramas. Del mismo
modo que dábamos un nombre de instancia a un botón lo haremos
con un fotograma.
• Basta con introducir una Etiqueta de fotograma para poder remitir el
cabezal a éste:
•

• gotoAndStop(fotograma), que situará el cabezal en el
fotograma indicado y parará la reproducción.

• play(), que hará que la reproducción prosiga en el
fotograma en el que se encuentre el cabezal.

• prevFrame(), que hará que el cabezal retroceda al
fotograma anterior al que nos encontramos.

• nextFrame(), que hará que el cabezal avance al
fotograma siguiente al que nos encontramos.
• Existen los controladores prevScene() y nextScene()
que hacen avanzar el cabezal a escenas anteriores o
siguientes. Así que veremos qué son las escenas para
poder utilizarlos también.

Las escenas

• Flash permite el uso de escenas para separar
diferentes temas en una sola película. Se suelen
utilizar sobre todo en animaciones, donde una
parte de la acción transcurre sobre un fondo y la
siguiente sobre otro completamente diferente.
• A pesar del hecho de que las escenas se trabajan
como líneas de tiempo diferentes, al crear el
archivo SWF éstas se alinean en orden
reproduciéndose una detrás de otra.

El uso de escenas obliga al usuario a descargar el documento en su totalidad, a
pesar de que es posible que no navegue por todas las secciones. Existe la
posibilidad, como veremos más adelante, de cargar en cualquier momento
archivos SWF para reproducirlos en la pantalla principal. De esta forma
emularíamos el uso de las escenas cargando diferentes documentos dependiendo
de la sección a mostrar.
Cuando añadimos ActionScript a nuestras escenas el resultado puede ser, a veces,
imprevisible. Como hemos explicado anteriormente, al crearse un archivo con una
línea de tiempo continua las acciones a realizar pueden ser inesperadas.
En el Panel Escena (ábrelo desde Ventana → Otros paneles → Escena) podrás ver
las escenas actuales de la película.

• Como hemos comentado antes (y si no existe código
ActionScript que modifique esto) las escenas se
reproducen una después de la otra en el orden en el
que se encuentran en el Panel Escena. Puedes cambiar
este orden con solo arrastrar y colocar la escena en
cuestión en su lugar correspondiente.
• Trabajar con una escena es muy sencillo, basta con
seleccionarla en el panel y su contenido se mostrará en
el Escenario. Podrás trabajar con ella como si se tratase
de una película independiente.
• Pero veamos cómo podemos utilizar ActionScript para
desplazarnos de escena a escena.
• Antes hemos mencionado las funciones prevScene() y
nextScene(). Estos comandos hacen que el cabezal de
reproducción se desplace de una escena a otra en el
orden en el que se encuentran en el Panel Escena.

Los MovieClips

• Podemos utilizarlos para incluir elementos en nuestra película con
una animación independiente. De este modo aunque la película
principal esté detenida el clip seguirá actuando según su propio
cabezal de reproducción.
• Existen métodos para manejar la línea de tiempo de los clips,
idénticas a las anteriores, y que veremos a continuación.
• Lo primero que deberemos aprender es a acceder a las propiedades
y métodos de los objetos. Esto es un recurso muy utilizado pero a la
vez es muy sencillo. Lo veremos con un ejemplo.
• Queremos que al pulsar un botón el movieclip avance en su línea de
tiempo hasta su fotograma 20.
• Fíjate en cómo hemos escrito la función. Primero hemos señalado
el clip sobre el que queremos actuar escribiendo su nombre de
instancia:

Vale 11

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

Semelhante a Vale 11

Semelhante a Vale 11 (20)

Vale 11