Professional Documents
Culture Documents
Objetivo.
Crear una cuadrícula que quedará visible al fondo del fotograma (posteriormente no
saldrá en la película) y que nos servirá como guía para poder dibujar objetos de forma
exacta y precisa.
3 Aparecerá una nueva película. Si deseas crear la cuadrícula sobre una película ya
empezada, sáltate los 2 primeros pasos.
4 Selecciona la opción Cuadrícula del menú Ver.
8 Selecciona la opción Ajustes → Ajustar a Cuadrícula del menú Ver para que los objetos
que crees se acomoden a las líneas de la cuadrícula, consiguiendo alinearlos de un modo
fácil.
Objetivo.
Practicar cómo se pueden cambiar algunos atributos fundamentales de las películas.
5 Pulsa en Aceptar y observa cómo cambia el tamaño. Estas medidas equivalen a las
standard 640 x 480 px.
Objetivo.
Abrir los Paneles de Carácter y el de Trazo y seleccionar uno.
2 Selecciona la opción Muestras de Color, si ya tuviera una señal junto al nombre del
Panel, significa que ya está abierto. Sino, haz clic sobre él.
3 Ahora selecciona el color verde de dicho panel, observa que al acercar el cursor, éste
tomará la forma de la herramienta cuentagotas (que servía para seleccionar un color).
4 Todo lo que dibujemos de ahora en adelante, será de color verde (podemos usar este
mecanismo para cambiar el color de relleno o el color del trazo)
Identifica todos los tipos de fotogramas existentes y a qué tipo pertenecen. ¿Recuerdas
para qué sirve cada uno?
Objetivo.
Crear una óvalo con las medidas y la forma que queramos
3 Haz clic y arrastra el ratón hacia el lugar que desees. Observarás que el movimiento de
tu ratón provoca la creación de un óvalo (figura 1). Cuando el óvalo tenga la forma
deseada, suelta el ratón. El resultado será similar al de la figura 2.
Truco: Si quieres crear un círculo perfecto, mantén pulsada la tecla SHIFT mientras das
forma al óvalo. (Sucede igual con la Herramienta Rectángulo)
Objetivo.
Dar color a un óvalo. Tanto a su interior como a su exterior
2 Hacemos clic en el interior del Óvalo o en su borde. Dependerá de la zona cuyo color
queramos modificar.
3 Una vez hecho esto, nos fijamos en el Panel de Colores, que se encuentra dentro de la
Objetivo.
Crear un objeto cuyo color sea transparente, de modo que se vean los objetos que haya
detrás
2 El Color de relleno del rectángulo creado será el que esté en ese momento seleccionado
en el Panel Mezclador de Colores. Por ejemplo, el azul.
3 Una vez creado, seleccionamos el relleno del Rectángulo y modificamos el valor Alfa. Por
Rectángulo Azul
Ahora con Transparencia
Si situamos otra imagen detrás de nuestro rectángulo (en otra capa), podemos ver cómo
queda el efecto de la transparencia sobre nuestro relleno
1 Dibuja 5 aros.
2 Cámbiales los colores. Por ejemplo, los colores de la bandera olímpica (Azul, negro, rojo,
amarillo y verde)
PRACTICA 6: Saturno
1 Dibuja un óvalo
2 Convierte su color de relleno un degradado de verde oscuro a verde claro (por ejemplo).
Objetivo.
Crear un texto cualquiera y asignarle el Tipo que más nos interese.
2 Veremos esta imagen Si deseamos crear texto Estático, basta con escribir dentro,
de lo contrario, deberemos seguir los siguientes pasos:
4 Una vez podamos ver el Panel seleccionamos la Pestaña en la que pondrá el tipo de
texto y elegimos el tipo de texto que queramos. Veremos que, al hacer
clic fuera del texto, cambia la línea que rodea al recuadro de texto, pasando a ser
discontínua y no desapareciendo aunque no escribamos nada dentro. (Los textos estáticos
CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 11
desaparecen si no escribes nada y haces clic en cualquier lugar del escenario). Esto es
lógico, ya que los textos Dinámicos y los de entrada no tienen porque tener "contenido"
Panel Propiedades
PRACTICA 8: Selecciones
1 Dibuja 5 óvalos. Dales el color de relleno y borde que quieras (elige un relleno que no
sea transparente )
3 Desagrúpalos.
Objetivo.
Mover un objeto situado en una capa a otra
7 Hacemos clic con el botón derecho sobre el escenario de este fotograma de destino.
Objetivo.
Crear un símbolo de gráfico que nos permitirá coger destreza en una acción que será
básica en la creación de animaciones.
Primer Símbolo".
Objetivo.
Comprender la diferencia entre un símbolo y una instancia de este símbolo.
3 Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primera carpeta que
aparece en la lista (Arcade buttons).
Aparecerá en el papel el símbolo que habíamos arrastrado. Esto es una instancia del
símbolo llamado arcade button - blue. Comprobémoslo.
7 Bien, ahora hemos modificado la instancia. Comprobemos que el símbolo sigue intacto.
Por tanto podemos seguir insertando y modificando ese símbolo y cualquier otro en esta u
otra película ya que estaremos insertando instancias.
3 Modifica su tamaño.
1 Sobre el ejercicio anterior, duplica la instancia del botón que has cambiado de tamaño.
2 Dale al botón que está tapando al otro un efecto Alfa del 40%.
Objetivo.
Cargar filtros mediante ActionScript dándoles las propiedades que queramos.
5. Luego accederemos a las propiedades de sombra y le daremos los valores que hay
en los campos del formulario:
sombra.distance = distance_stp.value;
sombra.angle = angle_stp.value;
sombra.color = 0x000000;
sombra.alpha = alpha_stp.value;
sombra.blurX = blur_stp.value;
sombra.blurY = blur_stp.value;
sombra.strength = strength_stp.value;
sombra.quality = quality_cmb.selectedItem.data;
sombra.inner = inner_chk.value;
sombra.knockout = knockout_chk.value;
sombra.hideObject = hideObject_chk.value;
6. Finalmente asociamos el filtro sombra que hemos creado a la propiedad filters del
clip:
pez.filters = [sombra];
Hemos creado una película donde podemos cambiar las propiedades de un filtro
dinámicamente. Fácil ¿verdad?.
Utiliza el archivo fuente filtros.fla que encontraras en la carpeta ejercicios/filtros del curso.
Como ya hemos visto, averiguar los filtros que afectan a un clip es realmente complicado,
deberás idear una forma para poder gestionarlos y mantener los que estén activos cada
vez que se pulse uno de los botones.
No deberás reproducir el aspecto de los filtros, puedes personalizarlos como más te guste.
Objetivo.
4 Hacemos clic con el botón derecho sobre el único fotograma existente en este
momento.
Vamos a hacer que llegue a su origen haciendo zig-zag con un par de acciones muy
sencillas, aprovechando el hecho de tener la interpolación ya creada.
10 Hacemos ahora clip con el botón derecho del ratón sobre el fotograma 10.
Repite estos dos últimos pasos para los fotogramas 15 y 20 y prueba la película.
Como podemos comprobar, el clip se desplaza ahora en línea recta pero en varias
direcciones distintas.
Objetivo.
Crear una animación sobre un texto separándolo en bloques de letras cuyo movimiento
será tratado de manera independiente, dando al texto un efecto vistoso que pudiera
servir como presentación de entrada a una web u otro tipo de película.
4 Accedemos al menú Modificar → Separar. Con esto separamos cada letra ya que de no
hacerlo Flash trataría todo el texto como un bloque y no podríamos dar el efecto a las
letras.
Vamos a separar el texto en los siguientes bloques: "a", "u", "la" y "Clic". Podríamos
cambiar los bloques si quisieramos dar otro efecto en concreto.
7 Nombramos cada una de las capas según el bloque de texto que vaya a contener, pero
en orden inverso en el que vaya a producirse la animación, para que el objeto en
movimiento se superponga a los que no lo están. Esto es, la capa de más arriba se llamará
"Clic", la siguiente "la" y así sucesivamente.
"A" : Fotograma 1.
"U" : Fotograma 6.
12 Hacemos clic con el botón derecho en los fotogramas centrales que hay entre los
fotogramas claves y seleccionamos cada vez Crear Interpolación de Movimiento.
13 Extendemos la imagen los últimos fotogramas de cada capa hasta que ocupen el
fotograma 30 (Botón derecho → Insertar Fotrograma Clave).
16 Aún en esta capa, hacemos clic con el botón derecho sobre el fotograma 24 y
seleccionamos Insertar Fotograma Clave.
Y ya tenemos la animación creada. Como vemos hemos utilizado todo tipo de técnicas de
interpolación, aunque todavía puede complicarse más como veremos más adelante.
4 Crea una animación fotograma a fotograma en la que se vea una cuenta atrás hasta el
cero.
5 Comprueba que pese a tener la película original un frame y el clip cinco, la animación se
ve completamente.
Objetivo.
Crear un botón con efecto relieve de forma rectangular tipo formulario de manera rápida
y sencilla.
2 Seleccionamos el fondo.
8 Seleccionamos el botón.
Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como están puesto
que no deseamos que haga nada mientras no pulsemos el botón y el área de acción es la
que comprende nuestro rectángulo.
3 Conviértelo a Botón
2 Haz que emita un sonido de la Biblioteca Común de Sonidos al pasar el ratón por encima
de él
3 Haz que emita otro sonido de la Biblioteca Común de Sonidos distinto al pulsarlo
2 En el primer fotograma inserta algún símbolo que se comporte como clip de película y
que contenta una animación de más de 1 fotograma
3 Ahora inserta en el clip el botón del ejercicio 1 de manera que se vea a lo largo de toda
su reproducción
3 Haz que cambie de forma y vaya de un lado a otro del escenario, dando la sensación de
que está reptando.
2 Cambia el movimiento de forma para que a mitad del trayecto de la impresión de que se
está acercando a nosotros.
2 Crea una animación de forma de manera que al final, la flecha quede con el mismo
aspecto pero apuntando en dirección contraria.
3 Hazlo de manera que parezca que se apoya en la punta y se abate como la bisagra de
una puerta.
Objetivo.
Exportar un objeto Flash 8 como un gráfico de tipo mapa de bits. En este caso, lo
exportaremos como JPG.
Objetivo.
Comprender el efecto de aceleración sobre una interpolación de movimiento.
3 Pulsa el botón derecho del ratón sobre el fotograma que contiene el clip de película
6 Desplaza el Clip de Película de ese fotograma a la parte derecha del área de trabajo.
7 Pulsa Intro para ver la animación sin salir del entorno de trabajo.
9 Intoduce un 100 en la casilla Aceleración (fuera), para hacer que acelere al principio y
vaya frenando poco a poco.
2 Dibuja una rueda y haz que se desplace de un lado al otro del escenario.
2 Dibuja una guía con forma de montañas para que sea recorrida por nuestra babosa.
3 Puesto que así parecerá que la babosa esté volando, haz que se arrastre por el borde de
la montaña.
1 Escribe tu nombre.
3 Haz que el nombre vaya desapareciendo y que ANTES de que lo haga aparezca poco a
poco el apellido por detrás suyo.
Objetivo.
Aprender a publicar una película Flash como archivo SWF independiente, así como
configurar las opciones de publicación.
3 Seleccionamos cada archivo JPG que tengamos con el botón derecho, y elegimos la
opción Propiedades.
7 En la primera opción, Orden de Carga, vamos a dejar el valor por defecto: De abajo a
arriba, para que cargue primero las primeras capas.
8 En la barra deslizante Calidad JPEG ponemos el valor 0 para reducir la calidad al mínimo.
Ahora tenemos una película que no podrán importar y cuyo espacio en memoria será
menor debido al menor tamaño de sus bitmaps.
Intenta deducir e identificar del siguiente código, resultante de la exportación de una película,
aquellos elementos que podamos haber indicado nosotros en las propiedades de exportación,
y que están estrechamente relacionados con la visualización que tendrá de ella la gente en el
navegador.
INSTRUCCION DESCRIPCION
EMBED
SRC
QUALITY
BGCOLOR
WIDTH
ALIGN
TYPE
PLUGINSPACE
</EMBED>
3 Impórtalo a tu película.
2 Comprueba que funciona (que el sonido puede escucharse). Para ello, pulsa CTRL+
ENTER (Esta combinación de teclas te permite "probar" la película).
1 Modifica tu sonido (usando Flash) de modo que en un principio no se oiga y poco a poco
vaya aumentando de volumen.
2 Modifica tu sonido de modo que al final del mismo, parezca que el sonido pasa de un
altavoz al otro.
Objetivo.
Importar una película creando los puntos de referencia que hemos utilizado en el ejemplo
de la teoría.
6. Ahora pulsa el botón Mostrar configuración avanzada y haz clic sobre la pestaña
Puntos de referencia.
Será en el segundo 07.359, puedes utilizar las flechas izquierda y derecha para
10. Pulsa el botón de nuevo para crear otro punto de referencia, le daremos el
nombre de carrera1 y seleccionaremos Navegación.
15. Desplázate hasta el segundo 42.280 y crea otro punto de referencia llamado
carrera1fin de Tipo Evento.
17. Desplázate hasta el segundo 58.159 e inserta otro punto de referencia. Llámalo
carrera2 y dale Tipo Navegación.
22. Crea un parámetro para este punto de referencia (pulsando el botón ), llámalo
fotograma y dale el valor lose.
23. Ya hemos terminado, haz clic en el botón Siguiente hasta que llegue al final y
empiece la importación.
Hemos importado un vídeo preparado para navegar por él y que nos pasará parámetros
en determinados puntos. Fácil ¿verdad?.
Utiliza el archivo fuente video.fla que encontraras en la carpeta ejercicios/video del curso.
Objetivo.
Crearemos una película parecida a esta:
11. Repite estos pasos para cada una de las formas que quieras añadir.
7. Arrastra otro símbolo y colócalo al pie del Escenario (este será el que hará que rote
el elemento).
9. Repite estos pasos para cada una de las formas que hayas creado.
10. Una vez ya estén todos los botones en el Escenario pasaremos a escribir el código
asociado.
13. Luego selecciona el botón que hará que se muestre el elemento y escribe lo
siguiente en el Panel Acciones:
on (release) {
if (_level1._visible) {
_level1._visible = false;
}
else {
_level1._visible = true;
}
14. También podemos acceder a las propiedades de los símbolos del SWF. Verás cómo.
Selecciona el botón que realizará el giro y escribe esto:
on (release) {
if (_level1._visible) {
_level1.cuadrado._rotation =
_level1.cuadrado._rotation - 15;
}
}
Como puedes ver, utilizamos la propiedad rotation, para referenciarnos al objeto
en cuestión sólo es necesario escribir el nivel en el que se encuentra seguido del
nombre de instancia que le dimos en su momento.
15. Repite estos pasos para cada uno de los botones. Recuerda escribir bien las rutas
de nivel y los nombres de instancia.
16. Una vez terminado prueba la película desde Control → Probar película.
Para ello deberás crear un movieclip que reproduzca el movimiento de la página, esta
película tiene que llamarse hoja_movimiento y deberá estar incluida directamente sobre
la película principal (_root.hoja_movimiento), pues los botones incluidos en las hojas SWF
que cargarás apuntan a ese clip de película para avanzar o retroceder.
Además, deberás marcar con etiquetas de fotogramas ambos movimientos (el de avance y
retroceso) como siguiente y anterior.
Tambíen deberás establecer el orden de tabulación de los objetos y el botón por defecto.
El validador del email deberá comprobar que la dirección esta correctamente escrita (para
ello utiliza función indexOf y lastIndexOf).
Ejercicio 20.Rotación
Objetivo.
Reproduciremos la película que vimos en la teoría pero en vez de utilizar diferentes
fotogramas de movieclips utilizaremos la propiedad _rotation.
2. Observa que al clip le hemos dado el nombre de instancia miClip. Ahora abre el
Panel Acciones (Ventana → Acciones o pulsando la tecla F9).
miClip._x = 30;
miClip.onPress = function() {
if (miClip._x <= 30) {
miClip._rotation = 10;
derecha = true;
}
if (miClip._x >= 515) {
miClip._rotation = -10;
izquierda = true;
}
}
onEnterFrame = function() {
if (derecha) {
if (miClip._x < 515) {
miClip._x = miClip._x + 6;
}
else {
Como puedes observar el código es idéntico al anterior pero cambiando las sentencias de
salto de fotograma por cambios de rotación en el clip.
Objetivo.
Reproduciremos la película de ejemplo que vimos en la teoría:
3. Selecciona Vinculación.
4. Se abrirá una ventana donde deberás hacer clic en la opción Exportar para
ActionScript.
_global.ultimaX = 0;
var miEstrella:MovieClip =
attachMovie("estrella", "estrella_"+ultimaX+"_"+ultimaY,
numEstrellas);
miEstrella._x = ultimaX;
miEstrella._y = ultimaY;
if (ultimaX>=Stage.width-50) {
ultimaY += 50;
ultimaX = 0;
} else {
ultimaX += 50;
}
}
}
Observa los que hemos hecho. Si podemos añadir más estrellas (entonces se
cumple la condición) aumentamos en 1 el contador de estrellas.
if (ultimaX==0) {
ultimaY -= 50;
ultimaX = Stage.width-50;
} else {
ultimaX -= 50;
}
removeMovieClip("estrella_"+ultimaX+"_"+ultimaY);
Objetivo.
Reproduciremos la película que vimos en la teoría:
on (release) {
stopDrag();
}
var grados:Number =
Math.round(radianes*180/Math.PI);
nave._rotation = grados;
};
Lo que hemos hecho en un principio es almacenar las cuatro coordenadas que nos
interesan, las de la nave y las de la pelota.
Nota: Observa que inicialmente la nave está orientada a la derecha, así que no
hará falta solventar el desfase de ángulo.
Objetivo.
Reproduciremos la película que vimos en la teoría:
if (Key.isDown(Key.DOWN)) {
if
(!(fondo.hitTest(miClip.getBounds(_root).xMin,
miClip.getBounds(_root).yMax+velocidad, true) ||
fondo.hitTest(miClip.getBounds(_root).xMax,
miClip.getBounds(_root).yMax+velocidad, true))) {
miClip._y += velocidad;
}
}
if (Key.isDown(Key.UP)) {
if
Pero no bastará con hacerlo sólo de una esquina, veamos un ejemplo para verlos
con más claridad:
Observa también que para realizar el hitTest hemos tenido en cuenta la posición
que adoptará el objeto después del movimiento (sumándole la velocidad, o lo que
Utiliza el archivo fuente arma.fla que encontraras en la carpeta ejercicios/arma del curso.
Tu tarea consistirá en crear el código necesario para que el juego funcione. Deberás seguir
las siguientes instrucciones:
• Crear un rayo con el arma cada vez que se pulsa la tecla Espacio.
Objetivo.
Reproduciremos la película que puedes ver a continuación:
this._xscale = recorrido * 5;
this._yscale = this._xscale;
}
}
• Dibujar un fondo.