PRÁCTICA
JUEGO INTERACTIVO
01. Descargar de internet imágenes alusivas a la temática incluyendo un marco con fondo transparente.
02. Descargar sonidos o efectos de sonidos alusivos a la temática.
03. Abrir en Adobe Flash un nuevo archivo 2.0
04. Importar a la Biblioteca las imágenes de un marco de fondo y los animales (5 mínimo).
05. Importar a la Biblioteca los sonidos de los animales.
06. Crear 3 capas: 1. Fondo (abajo) 2. Animales (enmedio) 06.Botones (arriba)
07. Insertar en la capa fondo la imagen del marco y ajustar
08. En la capa de Animales, distribuir las imágenes de los animales utilizando la herramienta alinear (espacios y distancia)
09. En la capa Botones crear un rectángulo con color de trazo con 2.0 de grosor y modificarlo en propiedades tipo Dentada.
10. Seleccionarlo y convertirlo a símbolo como clip de película: "G" (inicial de la imagen).
11. Abrir el símbolo "G" y renombrar la capa con el nombre de "botón"
12. Agregar una capa con el nombre de "texto"
13. Insertar una letra inicial del animal que corresponda.
14. Regresar al escenario y sacar 5 copias del botón original con la tecla alt
15. Utilizar la herramienta Alinear (espacio y distancia)
16. Para desvincular los botones: Click en propiedades "Intercambiar"
17. Click en el icono de "duplicar símbolos" nombre: "P"
18. Cambiar las propiedades, letra y color del botón.
19. Desvincular el tercer botón: Intercambiar y duplicar y ajustar.
20. Lo mismo con los botones que faltan
21. Seleccionar el Botón "G" y la imagen "Gallina" con la tecla SHIFT y convertirlo a símbolo: gallina tipo "Botón.
22. Abrir el Botón "G"
23. Click en el fotograma "Sobre" e insertar un fotograma clave
24. Ampliar un poco la escala del botón
25. Click en el fotograma "Presión" e insertar un fotograma clave
26. Centrar la imagen de la gallina y ampliarla al centro
27. Click en fotograma "Zona" e insertar un fotograma clave
28. Borrar la imagen de la gallina
29. Click en el fotograma "Presión" y arrastrar de la biblioteca (el espectro de arriba) el sonido del animal sobre la imagen central.
30. Hacer lo mismo con los botones restantes.
LISTO !! OK.
PRÁCTICA
AUTO CON SEMÁFORO CON ACTION SCRIPT 2.0
En el caso de utilizar un vehículo, las imágenes deben ser preparadas y acondicionadas en adobe photoshop en formato .png y con fondo transparente.
El vehículo y las llantas deben de guardarse en archivos separados.
1. Se importa a la biblioteca de adobe flash los archivos del auto y la rueda.
2. Insertar una instancia del archivo del auto al escenario, y convertirlo a símbolo tipo "clip de película" y con el nombre de "auto".
Borrarlo.
3. Insertar una instancia del archivo de la rueda al escenario, y convertirlo a símbolo tipo "clip de película" y con el nombre de "rueda".
Borrarlo.
4. Dentro de ese mismo símbolo "rueda", en la primer capa se le agregan 50 fotogramas, entre esos 50 fotogramas se inserta una interpolación clásica y en el panel "propiedades" se crea una rotación CW o CCW, para que la rueda gire una vuelta completa.
5. Abrir el símbolo "auto" y se le agregan los símbolos "rueda" en una segunda capa, y a cada rueda se le pone nombre de instancia "ruedadelantera" y "ruedatrasera".
6. En el escenario ).Se crea una capa con el nombre de "auto" y se copia una instancia del símbolo "auto". (Si hay contenido ajeno se borra).
7. Al auto se le pone nombre de instancia "auto"
8. Se le agregan 100 fotogramas a esa capa y se crea una animación en la que el auto corre de derecha a izquierda o viceversa con interpolación de movimiento.
9.. Se crea una nueva capa con el nombre de "siga" y en el primer fotograma se dibuja un botón circular en color verde y éste se convierte a símbolo "botón" con el nombre de "siga".
Abrir el Panel Acciones.
Click en el Botón "siga" del escenario. Y se le pone al símbolo el siguiente actionscript:
on (release) {
Play ();
auto.ruedadelantera.play();
auto.ruedatrasera.play();
}
10. Se crea una nueva capa con el nombre de "alto" y en el primer fotograma se dibuja un botón circular en color rojo y éste se convierte a símbolo "botón" con el nombre de "alto".
Abrir el Panel Acciones.
Click en el Botón "alto" del escenario. Y se le pone al símbolo el siguiente actionscript:
on (release) {
Stop ();
auto.ruedadelantera.stop();
auto.ruedatrasera.stop();
}
LISTO !!!!!!! OK. PROBAR.
PASOS PARA CREAR un Videojuego DE MOSCAS VOLANDO CON MIRILLA
1. Abrir un nuevo documento actionscript 2.0.
2. Modificar el tamaño de escenario a la medida de 1000 x 500 px.
3. Crear tres capas llamadas:
-
ACCIONES
-
MIRILLA
-
INSECTOS
La posición de las capas es la siguiente:
Arriba debe quedar Acciones, en medio Mirilla y abajo Insectos).
4. Seleccionar la capa MIRILLA e Insertar un nuevo símbolo tipo clip de película, con el nombre de: mirilla.
5. Dentro del símbolo mirilla crear dos capas una con el nombre de CIRCULO y otra con el nombre de LINEAS y dibujar sus respectivos elementos como se muestra en el video.
NOTA IMÓRTANTE:
El símbolo mirilla recién elaborado deberá quedar perfectamente centrado sobre el punto de referencia que tienen forma de cruz +.
6. Click en el escenario (Scene 1).
7. Click en la capa MIRILLA y arrastrar sobre el escenario una instancia del símbolo mirilla de la biblioteca y en el panel propiedades ajustar al tamaño de 50 x 50 px.
8. Click en el símbolo mirilla y en el panel propiedades poner su nombre de instancia: mirilla.
NOTA IMPORTANTE:
Los códigos actionscript se ingresan siempre en el panel “Acciones”
El panel “Acciones” se abre desde el Menú Ventana / “Acciones”.
9. Click en la capa ACCIONES e ingresar el siguiente actionscript:
mirilla.startDrag (true);
Mouse.hide();
10. Probar el actionscript.....OK.
11. Click en la capa INSECTOS e insertar un símbolo “tipo clip de película” con el nombre de: mosca final.
12. En ese símbolo crear 4 capas: labels, actions, button y mosca armada.
13. En la capa MOSCA ARMADA del símbolo mosca final, crear un nuevo símbolo “tipo clip de película” como: mosca armada.
Se insertan 4 capas: ojos, cuerpo, alas y patas.
14. Crear el cuerpo de la mosca, los ojos y las patas en sus respectivas capas.
15. En la capa ALAS insertar un nuevo símbolo clip de película que se llame: ala
e insertar 4 fotogramas clave y animar la ala de la mosca o insecto.
Insertar el símbolo ala (izquierda y derecha) a la capa ALAS del símbolo mosca armada.
16. Probar en escenario principal la mosca volando y borrarla después.
17. Abrir el símbolo mosca final
En la capa LABELS insertar un fotograma clave en el fotograma 10 y otro en el 20.
18. El nombre de etiqueta se pone dando un click en el fotograma y después en el panel propiedades en la opción: Etiqueta.
Poner nombre de etiqueta:
Al fotograma 1 se le pone el nombre: volando
Al fotograma 10 se le pone el nombre: mancha
19. Click en el fotograma 10 de la capa LABELS poner el siguiente actionscript:
stop();
20. En la capa ACTIONS insertar un fotograma clave en el segundo fotograma y poner el actionscript:
_x = _x + Math.random()*30-15;
_y = _y + Math.random()*30-15;
21. En la capa ACTIONS insertar en el tercer fotograma un fotograma clave y poner el actionscript:
gotoAndPlay(1);
22. En la capa ACTIONS insertar un fotograma clave en el fotograma 20 y poner el actionscript:
stop();
23. En la capa MOSCA ARMADA poner en el fotograma 1, el símbolo mosca armada.
24. En la capa BUTTON en el fotograma 1, crear un gráfico circular que cubra el cuerpo de la mosca y convertirlo como símbolo “tipo botón” con el nombre: circulo.
25. Dar doble click en la instancia del símbolo círculo e insertar fotogramas clave en los otros tres fotogramas vacíos.
26. Eliminar el contenido de los primeros tres fotogramas dejando solo el contenido del cuarto fotograma (se borra dando click en el fotograma a borrar y con la tecla “Supr”).
27. Regresar al símbolo mosca final.
28. En la capa BUTTON insertar un fotograma clave en el fotograma 20.
29. En la capa MOSCA ARMADA insertar un fotograma clave en el fotograma 10.
30. Insertar en ese fotograma 10 un nuevo símbolo “tipo clip de película” con el nombre: mancha y crear un gráfico en forma de mancha y regresar al símbolo mosca final.
31. En la capa MOSCA ARMADA, en el fotograma 10 sustituir el símbolo mosca armada, por el símbolo mancha y ajustar el tamaño, pero sin borrar el circulo.
32. Siguiendo en la misma capa de MOSCA ARMADA insertar un fotograma clave en el fotograma 20.
33. Respetando el orden de los clicks:
*Dar click en la capa BUTTON
*Dar click en el fotograma 1 de esa capa
*Dar click en el espacio en el escenario sobre un espacio limpio, vacío o blanco
*Dar click en la instancia circulo del escenario
*Insertar el actionscript:
on (release) {
gotoAndPlay("mancha");
}
34. Regresar al escenario (Scene 1).
35. (Opcional) crear una nueva capa llamada fondo.
36. Insertar un nuevo símbolo “tipo clip de película".
37. Crear efecto de velocidad o movimiento de fondo.
38. En la capa INSECTOS, poner 10 instancias de mosca final y repartirlas sobre el escenario con diferente escala.
39. Probar. Ok.
40. Ajustar tamaños de mirilla y moscas.
OK.
PRÁCTICA
JUEGO DE NAVE ESPACIAL CON ACTIONSCRIPT 2.0
(1ra. Parte)
1. Crear un nuevo archivo actionscript 2.0 en adobe flash.
2. Tamaño de escenario del 500px ancho x 600px de alto.
2. Se crean 4 capas.
3. La PRIMER capa superior con el nombre de: actions agregar al primer fotograma el actionscript: stop();
4. La SEGUNDA capa superior con el nombre de: nave
5. La TERCERA capa con el nombre de: enemigo
6. La CUARTA capa inferior con el nombre de: espacio
7. Insertar un nuevo símbolo tipo "Clip de película" con el nombre de: nave
8. Dentro de ese símbolo se crean dos capas.
9. La capa superior con el nombre de: nave
10. La capa inferior con el nombre de: propulsores
11. En la capa "nave" dibujar una nave espacial o importar la imagen ya tratada en adobe photoshop (con fondo transparente y en formato: png).
12. En la capa "propulsores" crear un nuevo símbolo tipo "clip de película" con el nombre de: propulsor
13. Dibujar o simular la flama de un propulsor en 4 diferentes etapas o formas
(usar solo 4 fotogramas, uno para cada forma) (animación fotograma a fotograma).
14. Abrir el símbolo "nave".
15. Insertar debajo de la nave el símbolo "propulsor" o los que se vayan a ocupar y ajustar tamaño y posición.
16. Seleccionar los propulsores utilizados y convertirlos en un símbolo (F8) tipo "clip de película" llamado: propulsores
17. La nave con propulsores deberá medir 75px de ancho por 100px de alto.
18. Al símbolo "propulsores" deberán aplicarse los siguientes filtros (panel propiedades).
Filtros para los propulsores:
DESENFOQUE
DesenfoqueX 5px
DesenfoqueY 5px
Calidad: Baja
ILUMINADO
DesenfoqueX 14px
DesenfoqueY 14px
Calidad: Baja
Color ROJO (o al gusto)
19. Se crea un símbolo tipo "clip de película" con el nombre de: enemigo o asteroide se dibuja una nave enemiga o asteroide o importar la imagen ya tratada en adobe Photoshop (con fondo transparente y en formato: png), bajar el zoom al 35% y dentro de su propia línea de tiempo se le agrega 75 fotogramas con una animación de movimiento vertical de arriba hacia abajo partiendo del centro hasta el final del escenario con una "interpolación clásica" y en el fotograma número 1 se agrega el siguiente actionscript:
this. _x = Math.random() * 500
20. La nave enemiga o asteroide deberá medir 50px de ancho por 50px de alto.
21. Insertar un nuevo símbolo tipo "clip de película" con el nombre de: espacio
22. Importar una imagen del espacio, esta deberá medir un poco más del doble de altura que el escenario (ejemplo: 500px de ancho por 1400px de alto), bajar el zoom al 25% y dentro de su propia línea de tiempo se le agrega 100 fotogramas con una animación de movimiento vertical de arriba hacia abajo calculando que recorra todo el escenario sin pasarte de sus limites y agregar una "interpolación clásica".
23. En el escenario principal mantener el zoom al 25%.
24. En la capa espacio del escenario principal, insertar el símbolo "espacio" en el escenario y ubicarlo cubriendo el escenario.
25. Probar la animación ejecutándola (ctrl+enter) y ajustar si es necesario.
26. En la capa enemigo, por la parte superior del escenario (por fuera) insertar varios símbolos "enemigo o asteroide" en diferente ubicación y altura.
27. Probar la animación ejecutándola (ctrl+enter) y ajustar si es necesario.
28. Regresar el zoom al 100%
29. En la capa nave, insertar el símbolo "nave" en la parte inferior del escenario (dentro).
30. Agregar el siguiente actionscript al símbolo "nave" (NO en el fotograma):
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x -= 5;
}
if (Key.isDown(Key.RIGHT)) {
_x += 5;
}
if (Key.isDown(Key.UP)) {
_y -= 5;
}
if (Key.isDown(Key.DOWN)) {
_y += 5;
}
}
LISTO !!!! OK. PROBAR !!!!