PDF de programación - Adobe Flash - Nivel 2

ADOBE FLASH • Nivel 2

ADOBE FLASH • Nivel 2

Contenido

Herramienta Huesos (Bones) ……………………………………………………………………………………………………... 3
Herramienta 3d (Rotación y Traslación) ………………………………………………………………………………………. 6
Menú Desplegable por “Release” ……………………………………………………………………………………………..... 8
Menú Desplegable por “RollOver” …………………………………………………………………………………………….. 11
Precargador con ActionScript ……………………………………………………………………………………………………. 14
Precargador en Línea de Tiempo ………………………………………………………………………………………………. 16
Galería de fotos …………………………………………………………………………………………………………………………. 18
Reproductor MP3 …………………………………………………………………………………………………………………….. 23
Formulario de Contacto ……………………………………………………………………………………………………………. 27

pg. 2

ADOBE FLASH • Nivel 2

Herramienta Huesos (Bones)

La herramienta de huesos
manteniendo una estructura de esqueleto que los une entre ellos.

nos permite crear animaciones a diferentes movieclips

Para crear animaciones con huesos inicialmente debemos crear la “armadura” o esqueleto. La
creación es un paso fundamental ya que los puntos de articulación que creemos determinan los
diferentes movimientos que podremos ejecutar sobre los movieclips.
Una vez creada la armadura, el segundo paso fundamental es la configuración de las propiedades
de cada movimiento que se permitirá efectuar sobre los movieclips, para los cuales básicamente
se permiten dos tipos: rotación y traslación(ésta última en el eje X y en el eje Y).
Para construir la armadura simplemente seleccionamos la herramienta huesos y hacemos click
sobre el punto de un movieclip y arrastramos el mouse hasta un segundo punto de otro movieclip
creando un brazo que une a ambos. Es importante la localización de este primer click pues
determina el eje principal de la armadura.

Para este ejercicio utilizaremos los movieclips que muestra la figura, que corresponden a una
figura humana donde los miembros del cuerpo los tenemos distribuidos en capas para poderlos
animar de manera independiente.

pg. 3

Iremos armando el esqueleto uniendo los movieclips como los muestra la siguiente figura. Al
momento de hacer las uniones es posible que se desordenen, para corregir esto usamos la
herramienta de “arreglo” presionando el botón derecho sobre los movieclips y colocándolos hacia
atrás o hacia adelante dependiendo donde queramos ubicarlos.

ADOBE FLASH • Nivel 2

Una vez creada la armadura ya podemos animar el objeto en diferentes frames de la línea de
tiempo para crear animaciones articuladas. Para esto es importante definir el tipo de animación
seleccionando cada brazo de la articulación y configurando los movimientos de rotación y
traslación que queramos en cada instante de tiempo.

pg. 4

ADOBE FLASH • Nivel 2

Si queremos hacer ajustes podemos eliminar brazos de la armadura, sólo debemos seleccionar el
brazo y presionar “delete”.

Un ejemplo de movimiento se muestra en la siguiente secuencia de animaciones creadas en los
frames: 1-10-30-40-55-75-90

Frame 1



Frame 10



Frame 30



Frame 40





Frame 55

Frame 75

Frame 90

Animación:

pg. 5

ADOBE FLASH • Nivel 2

Herramienta 3D (Rotación y Traslación)

La herramienta 3D
simulaciones de tercera dimensión sobre objetos planos.

incorporada en las últimas versiones de Flash nos permite hacer

Para trabajar simulando animaciones en 3D debemos intentar imaginar un espacio tridimensional
con tres ejes X, Y y Z.

Rotación

Cuando seleccionamos con la herramienta de rotación 3D un movieclip en el escenario,
visualizamos sobre él cinco parámetros de control sobre su rotación en el espacio:

eje X (línea roja vertical)

eje Y (línea verde horizontal)

eje Z (círculo azul)





todos los ejes (línea naranja)

orígen de coordenadas de los ejes (círculo blanco).



Traslación

Cuando seleccionamos con la herramienta de traslación 3D un movieclip en el escenario,
visualizamos sobre él cuatro parámetros de control sobre su traslación en el espacio:

eje X (flecha roja horizontal)

eje Y (flecha verde vertical)





eje Z (flecha azul visible

cuando se ha rotado el objeto)

pg. 6

ADOBE FLASH • Nivel 2

Origen de los ejes de coordenadas (centro negro cuando no muestra la Z).

Parámetros de rotación y transformación.

También podemos configurar la rotación y
traslación de objetos mediante valores
específicos en los paneles de propiedades y
transformación, cuando queremos trabajar con
absoluta precisión.

En el panel de propiedades podemos ajustar:

• la posición exacta en cada eje X, Y y Z
• las dimensiones del objeto (W y H)
• El ángulo de perspectiva (por defecto 55)
• Los puntos de fuga para los ejes X y Y.

En el panel de transformación podemos ajustar:

• Los ángulos de rotación para cada eje
• El origen de coordenadas.

pg. 7

Menú Desplegable por “Release”

El objetivo del ejercicio es la creación de un menú desplegable reutilizable que se active al hacer
click sobre el mismo y se repliegue al escoger una de sus opciones.

ADOBE FLASH • Nivel 2

Necesitaremos construir la siguiente estructura de movieclips con sus correspondientes nombres
de instancia:



menu_desplegable (mc: menud)

boton_menu (botón: menub)

opciones (mc: options)

boton1 (botón: b1)

boton2 (botón: b2)

boton5 (b5)

Movieclips y botones:

menud



menub



options



b1

pg. 8

ADOBE FLASH • Nivel 2

Una vez creada la estructura se ubicando únicamente visible

dentro del escenario al botón “menúb”.

Teniendo los movieclips y los botones ubicados en el escenario con los nombres de instancia arriba
indicados, editamos el movieclip menud haciendo doble click sobre él, y en su línea de tiempo
crearemos dos interpolaciones de movimiento sobre el movieclip de opciones y sobre el boton
menub:

En los frames 1 y 24 colocamos los objetos opciones y menub de manera que solo sea visible
dentro del escenario el botón menub.

En el frame 12 hacemos descender juntos ambos objetos hasta que todos los botones se
encuentren dentro del escenario.

Una vez que se han creado ambas interpolaciones procedemos a colocar el código de actionscript
que permitirá el despliegue del menú, el mismo se colocará en los frames 1 y 12 como se indica a
continuación:

pg. 9

Actionscript para el frame 1:

stop();

ADOBE FLASH • Nivel 2

menub.onRelease = function() {

play();

options.b1.onRelease = function() {

play();
// otros comandos para la opción 1

options.b2.onRelease = function() {

play();
// otros comandos para la opción 2

}

}

}

}

}

}

options.b3.onRelease = function() {

play();
// otros comandos para la opción 3

options.b4.onRelease = function() {

play();
// otros comandos para la opción 4

options.b5.onRelease = function() {

play();
// otros comandos para la opción 5

Actionscript para el frame 12:

stop();

Finalmente se publica la película.

Para reutilizar este menú basta con copiar el objeto principal ubicado en la escena 1 dentro de
cualquier otro documento de flash.

pg. 10

ADOBE FLASH • Nivel 2

Menú Desplegable por “RollOver”

En este ejercicio utilizaremos los mismos componentes del ejercicio anterior, sólo haremos
algunas modificaciones a las interpolaciones y al código actionscript.

Teniendo la misma estructura de movieclips anteriormente creada, editamos el movieclip menud y
sólo creamos una interpolación de movimiento para el movieclip options como indican las
siguientes figuras:

Posición de options en los frames 1 y 24



Posición de options en el frame 12

Como se observa en las figuras, el botón menub permanece siempre en la misma posición.

Adicionalmente deberemos crear una zona externa al área de botones dentro del movieclip
opciones, para capturar el evento de salida del menú.

Una vez editado el movieclip opciones, cremos una capa
nueva que llamamos “zona fuera” y dibujamos una area
alrededor de los botones como muestra la figura a la
derecha y la convertimos en movieclip con el nombre
“zona_fuera”. Posteriormente le damos el nombre de
instancia “zout” y le damos un alfa=0, para hacerla
invisible.

pg. 11

ADOBE FLASH • Nivel 2

Una vez creada la interpolación colocamos los siguientes códigos actionscript en los frames 1, 2,
12 y 13:

Actionscript para el frame 1:

stop();

menub.onRollOver = function() {

options.zout.onRollOver = function() {

play();

play();

}

}

}

}

}

}

}

options.b1.onRelease = function() {

play();
// otros comandos para la opción 1

options.b2.onRelease = function() {

play();
// otros comandos para la opción 2

options.b3.onRelease = function() {

play();
// otros comandos para la opción 3

options.b4.onRelease = function() {

play();
// otros comandos para la opción 4

options.b5.onRelease = function() {

play();
// otros comandos para la opción 5

Actionscript para el frame 2:

menub.enabled = false;
options.zout.enabled = true;

pg. 12

ADOBE FLASH • Nivel 2

Actionscript para el frame 12:

stop();

Actionscript para el frame 13:

menub.enabled = true;
options.zout.enabled = false;

Finalmente publicamos la película.

pg. 13

Precargador con Actionscript

Para construir este precargador necesitaremos 5 capas como muestra la siguiente figura

ADOBE FLASH • Nivel 2

En la capa inferior bg colocaremos una barra de fondo como muestra la siguiente figura, ésta nos
dará el tamaño total de la carga.

En la capa carga colocamos una copia de la barra de fondo, la convertimos en movieclip y le
damos nombre de instancia “barra_mc”. A su vez, le damos un efecto de color y le aplicamos un
filtro para diferenciarla de la barra de fondo como muestra la siguiente figura.

En la capa texto coloc