SlideShare una empresa de Scribd logo
1 de 24
Giovanny Lombana Sayo
       11-01 J.T
       20-02-13
   El ActionScript 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
    ActionScript 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 ActionScript
    3 que servirá para sentar las bases que
    permitirán empezar a trabajar con ActionScript.
    Enseñar a programar con ActionScript
    requeriría otro curso completo. Profundizar en
Características generales
   Como ya hemos comentado, el ActionScript es el lenguaje de
    programación propio de Flash, tal y como el Lingo lo es de
    Macromedia Director, por ejemplo. El ActionScript está basado en
    la especificación ECMA-262, al igual que otros lenguajes como
    Java script.
   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
    Java script o PHP; si estamos familiarizados con estos lenguajes,
    la sintaxis y el estilo de ActionScript nos resultarán muy familiares.
    Las diferencias entre Java Script 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,
   En Flash CS5, el
    Panel Acciones sirve para
    programar scripts con
    ActionScript, 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
    ActionScript introducido
    afectará tan sólo a aquello a
    lo que referencia el Panel.
    Por ejemplo, en la imagen
    inferior, se puede distinguir
    que el Panel Acciones hace
    referencia al Fotograma 1 de
   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.
   En la parte superior
    encontramos herramientas que
    nos ayudarán. Veamos las más
    útiles:
    Buscar: Busca un texto en el
    código. Útil, por ejemplo, si
    queremos buscar en todos los
    sitios que empleamos un
    objeto.
   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
   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.
   Por ejemplo:
   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
   Otros Elementos del lenguaje
   ( ) : Paréntesis. Sirven, como es de esperar, para
    agrupar términos y dar preferencias en las operaciones
    (al igual que en matemáticas). También se usa, como
    ya vimos, para pasar parámetros a funciones o
    acciones.
   " " : Comillas. En ActionScript, todo lo que va entre
    comillas, pasa a considerarse una cadena de
    caracteres. Así por ejemplo, mientras que x representa
    una variable con un valor determinado, si escribimos
    "x", estamos escribiendo en realidad el carácter o la
    letra "x". Por tanto, podremos añadirlo a una palabra,
    compararlo con otras letras, escribirlo por pantalla etc..
    pero ya no será una variable.
   //: Comentario de línea. Indica que el texto a partir de
    ahí, y en esa línea, es un comentario, y no se ejecutará
    como código.
   /* ....... */: Comentario de bloque. Cualquier texto de
    una o más líneas encerrado entre estos caracteres es
    un comentario, y no se ejecutará como código.

   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.
   Vamos a ver los objetos más usados en Flash y una breve
    descripción de cada uno de ellos. Como ya se ha explicado
    en el tema básico, cada objeto tiene una serie de
    Propiedades (que veremos después),
    unos Métodos y eventos, que dan funcionalidad a los
    objetos. Cuando un componente de Flash pasa a ser un
    objeto, automáticamente pasa a tener todas las
    propiedades definidas por Flash para ese objeto y pasa a
    reaccionar ante los Métodos y eventos que tiene definidos.
    Podemos encontrar una lista con todas las propiedades,
    métodos y Acciones.
   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
   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.
    Podríamos, por ejemplo, crear un objeto de tipo sonido y después
    hacer que al pulsar un botón suene. (Más adelante se verá algún
    ejemplo de uso de sonidos). 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
   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.
   Sonidos con ActionScript 3

     Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en
    Flash CS5 los sonidos también son objetos y podemos manejarlos usando
    adecuadamente ActionScript. Veamos unos cuantos códigos muy
    comunes y un completo ejemplo de cómo usarlos:

   Como ya sabemos, los objetos no visibles también se controlan con ActionScript. Vamos
    a ver algunos ejemplos del funcionamiento del objeto Math y cómo sacarle partido.
   x = Math.random();
   El método random del objeto Math genera un número aleatorio entre 0 y 1. En este caso,
    el resultado lo almacenamos en la variable x, para poder usarlo después...
   Las utilidades de este método son muchas, generar claves secretas, passwords, números
    de lotería etc...

   x = Math.round(4.3);
   El Método "round" REDONDEA el parámetro introducido eliminando la parte decimal
    del mismo. Aunque nuestra configuración utilice la coma para separar los decimales, en
    Flash debemos utilizar el punto.
   En el ejemplo, x pasaría a valer 4.

   x = Math.max(5 , 2);
   El Método "max" obtiene el valor máximo entre 2 números.
   En el ejemplo, x pasaría a valer 5.
   Fotograma 1: En el Fotograma 1 se calculan los bytes totales que ocupa la
    película. Después pasamos al Fotograma 2.
   Fotograma 2: Cada vez que accedamos al Fotograma 2, nuestro código
    ActionScript averigua los bytes que llevamos cargados en memoria y los
    compara con los totales (que se hallaron en el Fotograma 1 y no vuelven a
    averiguarse, pues no varían). Si ya está toda la película cargada, vamos al
    fotograma 4 y comenzamos a reproducir la película, sino, pasamos al
    fotograma 3
   Fotograma 3: El Fotograma 3 volverá a mandar la cabeza lectora al
    fotograma 2. Haciendo este ciclo, damos tiempo al ordenador a ir
    cargando poco a poco la película, hasta que llegue un momento que esté
    toda cargada y pasemos al Fotograma 4. El cálculo del porcentaje es un
    "adorno" que nos permitimos, pues con un poco más de esfuerzo
    averiguamos cuánta película llevamos cargada y la mostramos por
    pantalla de un modo elegante (en porcentaje) haciendo la espera del
    usuario menos aburrida.
   Fotograma 4: Aquí comienza la película... (Ya no se volverá nunca a
    ninguno de los fotogramas anteriores).

   Abajo mostramos el resultado. La película se comenzará a cargar al pulsar
    el botón. El código insertado es el que se muestra arriba, no hay NADA
    MÁS. Tan sólo se han añadido unos textos y unas imágenes para
    aumentar el tamaño de la película, de lo contrario la carga sería
    demasiado rápida y no llegaría a verse.
   También se ha insertado el texto dinámico que muestra el porcentaje.
   En este tema veremos los
    puntos más importantes en los
    que te podrás apoyar para
    realizar tus animaciones en
    Flash usando ActionScript.
   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
   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.

   Así que el primer paso, después de
    haber creado la interfaz de la película
    en una capa, será crear e insertar los
    botones en una nueva capa para
    trabajar con mayor facilidad.
   Para asignarle una acción a un
    botón es necesario darle un
    nombre de instancia. Para ello (y
    como hemos visto en unidades
    anteriores) escribimos el nombre que
    queramos (al cual nos referiremos
    más tarde para llamar al botón) en
    el Inspector de Propiedades, en
    este caso lo hemos llamado equipo.
   Luego, creamos otra capa para poder insertar las acciones que
    necesitarán nuestros botones, abrimos el Panel Acciones y añadiremos
    el código que deberá realizar el botón.
   Ésta es la parte más importante pues deberemos decidir a qué evento
    responderá el botón. Existen varios eventos que son capturados en
    Flash, nombraremos los más importantes (echa un vistazo a la
    sección Controladores de evento del panel Fragmentos de código).:
   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.
   Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo
    que si escribes, por ejemplo, mouse_up no será reconocido.
   Para capturar el evento tenemos que añadir un escuchador que se
    encargue de estar pendiente de si sucede ese evento, al elemento
    correspondiente. En nuestro caso, al botón. Además del evento, debemos
    de indicar el nombre de una función, que será el código que se ejecute
    al producirse el evento.
   Por tanto, si no hemos creado ya esa función, la tenemos que definir, con
    el mismo nombre y pasándole como parámetro el evento. Como
    siempre, entre las llaves {} introduciremos el código que queremos que
   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.
   De esta forma, al hacer clic sobre ese
    botón, el cabezal de reproducción se
    desplazará hasta el fotograma que tiene la
    etiqueta "Encuéntranos" 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:
   Además de estos controladores podemos
    utilizar también:
   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.
   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.
   De este modo podemos usar las escenas para representar diferentes secciones muy
    diferentes en nuestra película, por ejemplo, crear una escena para el cargador, otra para la
    película principal y una tercera para una sección que se diferencie completamente del resto
    y nos sea más cómodo trabajar con ella independientemente.
   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.
   Por ello, al publicar el documento los fotogramas de las escenas se numerarán respecto a
    esto. Es decir, si tenemos una primera escena que va del fotograma 1 al 50, la segunda
    escena comenzará en el fotograma 51.
   Todo esto hace que las escenas, en algunos casos estén desaconsejadas por las siguientes
    razones:
   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.
   En el tema de Clips de Película vimos que se tratan
    de objetos con línea de tiempo propia.
   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:
   Si observas
    tenemos dos
    movieclips en la
    película, uno de
    ellos
    llamado estrella, y
    el otro detalle. La
    línea de tiempo de
    estos movieclips
    tendría este
    aspecto:
   Las variables son contenedores donde podremos almacenar
    información para trabajar con ella. Esta información puede ser
    modificada y leída.
   Aunque parece un concepto muy complejo su uso es bastante
    sencillo.
   En ActionScript existen muchos tipos diferentes de variables, de
    hecho en una variable podemos guardar cualquier tipo de objeto.
    Vamos a ver ahora los más comunes, los que emplearemos para
    guardar texto, números o valores booleanos (verdadero - falso):
   Boolean: o booleano, puede almacenar sólo dos valores,
    o true (verdadero) o false (falso).

   Number: puede almacenar números enteros o decimales, positivos
    o negativos. El signo decimal en ActionScript es el punto (.). Podrás
    realizar operaciones matemáticas con estas variables.
   String: puede almacenar cadenas de caracteres, es decir, un
    conjunto de caracteres alfanuméricos. Las variables de
    tipo String deben ir entre comillas dobles ("cadena") o ('cadena').
   Array: en los arrays o matrices podemos almacenar distintos
    valores en distintas posiciones. A estas posiciones accedemos con
   Al hacer clic en el movieclip estrella se evalúa la
    variable estrella_activada si ésta es verdadera (true)
    entonces permite que se realicen las acciones. En
    caso contrario, sale de la condición.
   Al entrar en la condición se desplazan los cabezales y
    se modifica el valor de la variable a falso para que la
    próxima vez que intente entrar no puedan ejecutarse
    las acciones.
   En el click del clip detalle se evalúa de nuevo la
    variable. Esta vez debería estar en false porque si el
    detalle está fuera es porque ya se ha hecho clic sobre
    la estrella y ha pasado por el anterior bloque.
   A medida que vayamos avanzando iremos usando
    otras variables de diferentes tipos. Verás que su uso
    no difiere mucho al que hemos explicado ahora.
   Antes de terminar con este tema deberíamos ver algo
    muy importante: el ámbito de las variables.
   Esto es, el sitio donde puedan utilizarse las variables.
   Nota: Para explicar el ámbito de las variables
    utilizaremos la función trace(variable); que envía el

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Actionscript
ActionscriptActionscript
Actionscript
 
Action scrips
 Action scrips Action scrips
Action scrips
 
Action s cript 3
Action s cript 3Action s cript 3
Action s cript 3
 
Francy velandia
Francy velandiaFrancy velandia
Francy velandia
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3
 
Marcela montoya
Marcela montoyaMarcela montoya
Marcela montoya
 
Action script 3.0
Action script 3.0Action script 3.0
Action script 3.0
 
Angie tovar (1)
Angie tovar (1)Angie tovar (1)
Angie tovar (1)
 
2trabajo
2trabajo2trabajo
2trabajo
 
Actionscript
ActionscriptActionscript
Actionscript
 
Maira
MairaMaira
Maira
 
Alejandra vargas
Alejandra vargasAlejandra vargas
Alejandra vargas
 
Jeison bello Trabajo n° 2
Jeison bello Trabajo  n° 2 Jeison bello Trabajo  n° 2
Jeison bello Trabajo n° 2
 
Action script 3.0
Action script 3.0Action script 3.0
Action script 3.0
 
Colegio Venecia Trabajo #2 Gina Franco
Colegio Venecia Trabajo #2 Gina FrancoColegio Venecia Trabajo #2 Gina Franco
Colegio Venecia Trabajo #2 Gina Franco
 
Actionscrip linakrdona n2
Actionscrip linakrdona n2Actionscrip linakrdona n2
Actionscrip linakrdona n2
 
Gragiel aragon Action Scrip 3
Gragiel aragon Action Scrip 3Gragiel aragon Action Scrip 3
Gragiel aragon Action Scrip 3
 
Action Script
Action ScriptAction Script
Action Script
 
Edgar campo action scrip
Edgar campo action scripEdgar campo action scrip
Edgar campo action scrip
 
Action script
Action scriptAction script
Action script
 

Similar a Introducción a las características y objetos de ActionScript 3 en Flash CS5

Similar a Introducción a las características y objetos de ActionScript 3 en Flash CS5 (20)

Trabajo de multimedia 2
Trabajo de multimedia 2Trabajo de multimedia 2
Trabajo de multimedia 2
 
actionscript
actionscriptactionscript
actionscript
 
Action script
Action scriptAction script
Action script
 
Flash
FlashFlash
Flash
 
Trabajo 2
Trabajo 2Trabajo 2
Trabajo 2
 
Andres alexis canizales (1)
Andres alexis canizales (1)Andres alexis canizales (1)
Andres alexis canizales (1)
 
Action script
Action scriptAction script
Action script
 
Sandra 1101
Sandra  1101Sandra  1101
Sandra 1101
 
Angie eme
Angie emeAngie eme
Angie eme
 
Trabajo multimedia 2
Trabajo multimedia 2Trabajo multimedia 2
Trabajo multimedia 2
 
Angita eme
Angita emeAngita eme
Angita eme
 
Action script
Action scriptAction script
Action script
 
Action script
Action scriptAction script
Action script
 
Vale 11
Vale 11Vale 11
Vale 11
 
Actionscrip 30
Actionscrip 30Actionscrip 30
Actionscrip 30
 
Monik
MonikMonik
Monik
 
Action script
Action scriptAction script
Action script
 
Action script
Action scriptAction script
Action script
 
John cajica
John cajicaJohn cajica
John cajica
 
Action script
Action scriptAction script
Action script
 

Introducción a las características y objetos de ActionScript 3 en Flash CS5

  • 1. Giovanny Lombana Sayo 11-01 J.T 20-02-13
  • 2. El ActionScript 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 ActionScript 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 ActionScript 3 que servirá para sentar las bases que permitirán empezar a trabajar con ActionScript. Enseñar a programar con ActionScript requeriría otro curso completo. Profundizar en
  • 3. Características generales  Como ya hemos comentado, el ActionScript es el lenguaje de programación propio de Flash, tal y como el Lingo lo es de Macromedia Director, por ejemplo. El ActionScript está basado en la especificación ECMA-262, al igual que otros lenguajes como Java script.  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 Java script o PHP; si estamos familiarizados con estos lenguajes, la sintaxis y el estilo de ActionScript nos resultarán muy familiares. Las diferencias entre Java Script 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,
  • 4. En Flash CS5, el Panel Acciones sirve para programar scripts con ActionScript, 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 ActionScript introducido afectará tan sólo a aquello a lo que referencia el Panel. Por ejemplo, en la imagen inferior, se puede distinguir que el Panel Acciones hace referencia al Fotograma 1 de
  • 5. 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.  En la parte superior encontramos herramientas que nos ayudarán. Veamos las más útiles:  Buscar: Busca un texto en el código. Útil, por ejemplo, si queremos buscar en todos los sitios que empleamos un objeto.
  • 6. 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
  • 7. 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.  Por ejemplo:  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
  • 8. Otros Elementos del lenguaje  ( ) : Paréntesis. Sirven, como es de esperar, para agrupar términos y dar preferencias en las operaciones (al igual que en matemáticas). También se usa, como ya vimos, para pasar parámetros a funciones o acciones.  " " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse una cadena de caracteres. Así por ejemplo, mientras que x representa una variable con un valor determinado, si escribimos "x", estamos escribiendo en realidad el carácter o la letra "x". Por tanto, podremos añadirlo a una palabra, compararlo con otras letras, escribirlo por pantalla etc.. pero ya no será una variable.  //: Comentario de línea. Indica que el texto a partir de ahí, y en esa línea, es un comentario, y no se ejecutará como código.  /* ....... */: Comentario de bloque. Cualquier texto de una o más líneas encerrado entre estos caracteres es un comentario, y no se ejecutará como código. 
  • 9. 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.  Vamos a ver los objetos más usados en Flash y una breve descripción de cada uno de ellos. Como ya se ha explicado en el tema básico, cada objeto tiene una serie de Propiedades (que veremos después), unos Métodos y eventos, que dan funcionalidad a los objetos. Cuando un componente de Flash pasa a ser un objeto, automáticamente pasa a tener todas las propiedades definidas por Flash para ese objeto y pasa a reaccionar ante los Métodos y eventos que tiene definidos. Podemos encontrar una lista con todas las propiedades, métodos y Acciones.
  • 10. 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
  • 11. 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. Podríamos, por ejemplo, crear un objeto de tipo sonido y después hacer que al pulsar un botón suene. (Más adelante se verá algún ejemplo de uso de sonidos). 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
  • 12. 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.  Sonidos con ActionScript 3  Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en Flash CS5 los sonidos también son objetos y podemos manejarlos usando adecuadamente ActionScript. Veamos unos cuantos códigos muy comunes y un completo ejemplo de cómo usarlos: 
  • 13. Como ya sabemos, los objetos no visibles también se controlan con ActionScript. Vamos a ver algunos ejemplos del funcionamiento del objeto Math y cómo sacarle partido.  x = Math.random();  El método random del objeto Math genera un número aleatorio entre 0 y 1. En este caso, el resultado lo almacenamos en la variable x, para poder usarlo después...  Las utilidades de este método son muchas, generar claves secretas, passwords, números de lotería etc...   x = Math.round(4.3);  El Método "round" REDONDEA el parámetro introducido eliminando la parte decimal del mismo. Aunque nuestra configuración utilice la coma para separar los decimales, en Flash debemos utilizar el punto.  En el ejemplo, x pasaría a valer 4.   x = Math.max(5 , 2);  El Método "max" obtiene el valor máximo entre 2 números.  En el ejemplo, x pasaría a valer 5.
  • 14. Fotograma 1: En el Fotograma 1 se calculan los bytes totales que ocupa la película. Después pasamos al Fotograma 2.  Fotograma 2: Cada vez que accedamos al Fotograma 2, nuestro código ActionScript averigua los bytes que llevamos cargados en memoria y los compara con los totales (que se hallaron en el Fotograma 1 y no vuelven a averiguarse, pues no varían). Si ya está toda la película cargada, vamos al fotograma 4 y comenzamos a reproducir la película, sino, pasamos al fotograma 3  Fotograma 3: El Fotograma 3 volverá a mandar la cabeza lectora al fotograma 2. Haciendo este ciclo, damos tiempo al ordenador a ir cargando poco a poco la película, hasta que llegue un momento que esté toda cargada y pasemos al Fotograma 4. El cálculo del porcentaje es un "adorno" que nos permitimos, pues con un poco más de esfuerzo averiguamos cuánta película llevamos cargada y la mostramos por pantalla de un modo elegante (en porcentaje) haciendo la espera del usuario menos aburrida.  Fotograma 4: Aquí comienza la película... (Ya no se volverá nunca a ninguno de los fotogramas anteriores).  Abajo mostramos el resultado. La película se comenzará a cargar al pulsar el botón. El código insertado es el que se muestra arriba, no hay NADA MÁS. Tan sólo se han añadido unos textos y unas imágenes para aumentar el tamaño de la película, de lo contrario la carga sería demasiado rápida y no llegaría a verse.  También se ha insertado el texto dinámico que muestra el porcentaje.
  • 15. En este tema veremos los puntos más importantes en los que te podrás apoyar para realizar tus animaciones en Flash usando ActionScript.  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
  • 16. 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.  Así que el primer paso, después de haber creado la interfaz de la película en una capa, será crear e insertar los botones en una nueva capa para trabajar con mayor facilidad.  Para asignarle una acción a un botón es necesario darle un nombre de instancia. Para ello (y como hemos visto en unidades anteriores) escribimos el nombre que queramos (al cual nos referiremos más tarde para llamar al botón) en el Inspector de Propiedades, en este caso lo hemos llamado equipo.
  • 17. Luego, creamos otra capa para poder insertar las acciones que necesitarán nuestros botones, abrimos el Panel Acciones y añadiremos el código que deberá realizar el botón.  Ésta es la parte más importante pues deberemos decidir a qué evento responderá el botón. Existen varios eventos que son capturados en Flash, nombraremos los más importantes (echa un vistazo a la sección Controladores de evento del panel Fragmentos de código).:  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.  Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo que si escribes, por ejemplo, mouse_up no será reconocido.  Para capturar el evento tenemos que añadir un escuchador que se encargue de estar pendiente de si sucede ese evento, al elemento correspondiente. En nuestro caso, al botón. Además del evento, debemos de indicar el nombre de una función, que será el código que se ejecute al producirse el evento.  Por tanto, si no hemos creado ya esa función, la tenemos que definir, con el mismo nombre y pasándole como parámetro el evento. Como siempre, entre las llaves {} introduciremos el código que queremos que
  • 18. 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.
  • 19. De esta forma, al hacer clic sobre ese botón, el cabezal de reproducción se desplazará hasta el fotograma que tiene la etiqueta "Encuéntranos" 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:  Además de estos controladores podemos utilizar también:  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.
  • 20. 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.  De este modo podemos usar las escenas para representar diferentes secciones muy diferentes en nuestra película, por ejemplo, crear una escena para el cargador, otra para la película principal y una tercera para una sección que se diferencie completamente del resto y nos sea más cómodo trabajar con ella independientemente.  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.  Por ello, al publicar el documento los fotogramas de las escenas se numerarán respecto a esto. Es decir, si tenemos una primera escena que va del fotograma 1 al 50, la segunda escena comenzará en el fotograma 51.  Todo esto hace que las escenas, en algunos casos estén desaconsejadas por las siguientes razones:  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.
  • 21. En el tema de Clips de Película vimos que se tratan de objetos con línea de tiempo propia.  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:
  • 22. Si observas tenemos dos movieclips en la película, uno de ellos llamado estrella, y el otro detalle. La línea de tiempo de estos movieclips tendría este aspecto:
  • 23. Las variables son contenedores donde podremos almacenar información para trabajar con ella. Esta información puede ser modificada y leída.  Aunque parece un concepto muy complejo su uso es bastante sencillo.  En ActionScript existen muchos tipos diferentes de variables, de hecho en una variable podemos guardar cualquier tipo de objeto. Vamos a ver ahora los más comunes, los que emplearemos para guardar texto, números o valores booleanos (verdadero - falso):  Boolean: o booleano, puede almacenar sólo dos valores, o true (verdadero) o false (falso).  Number: puede almacenar números enteros o decimales, positivos o negativos. El signo decimal en ActionScript es el punto (.). Podrás realizar operaciones matemáticas con estas variables.  String: puede almacenar cadenas de caracteres, es decir, un conjunto de caracteres alfanuméricos. Las variables de tipo String deben ir entre comillas dobles ("cadena") o ('cadena').  Array: en los arrays o matrices podemos almacenar distintos valores en distintas posiciones. A estas posiciones accedemos con
  • 24. Al hacer clic en el movieclip estrella se evalúa la variable estrella_activada si ésta es verdadera (true) entonces permite que se realicen las acciones. En caso contrario, sale de la condición.  Al entrar en la condición se desplazan los cabezales y se modifica el valor de la variable a falso para que la próxima vez que intente entrar no puedan ejecutarse las acciones.  En el click del clip detalle se evalúa de nuevo la variable. Esta vez debería estar en false porque si el detalle está fuera es porque ya se ha hecho clic sobre la estrella y ha pasado por el anterior bloque.  A medida que vayamos avanzando iremos usando otras variables de diferentes tipos. Verás que su uso no difiere mucho al que hemos explicado ahora.  Antes de terminar con este tema deberíamos ver algo muy importante: el ámbito de las variables.  Esto es, el sitio donde puedan utilizarse las variables.  Nota: Para explicar el ámbito de las variables utilizaremos la función trace(variable); que envía el