epelpad

Flash A Tus Pies...

Hola a Todos, hoy quiero compartir con ustedes este Post con la intención de que aprendan algo... se trata de una GRAN compilación de consejos, trucos, formas y demás para pasar el tiempo en FLASH, en este caso yo uso el flash 8 y la verdad cuando no hay nada que hacer no está de más aprender un poco... Ya hace tiempo que no hacía un post en Taringa, y aunque se que están pensando que soy un idiota por que no tengo ningún post excepto este, YO tenía otra cuenta (angelsamir0109) de la cual tuve un post exitoso llamado "¿Cómo hice este gif?", pero por ciertas razones suspendieron mi cuenta, robaron mi post, lo repostearon como 3 veces, y de paso borraron mi post!!! , pero bueno, el pasado atrás... continuemos...

Flash A Tus Pies...

EL POR QUÉ...

Tal vez muchos compartamos el sueño de poder hacer un juego o una super animación y demás, pero para ello debemos dedicar tiempo, cosa que es tediosa, aunque esto me apasione tengo mis ocupaciones y los proyectos que he empezado no los he terminado... más abajo los verán. En todo caso todo lo que he hecho lo he aprendido SOLO, sin ayuda de nadie, ya que aquí (Colombia) y en muchos países la educación es un privilegio y no un derecho. Pero no es razón para no compartir el conocimiento. Basta de chachara y he aquí mis proyectos.

aprender


Primer proyecto

Este primer proyecto es la forma mas Dummie para hacer un "juego" ya que es un proceso largo, tedioso, experimental y demás , la verdad me tomó una semana entre ingenio y demás para hacerlo, aclaro que jamas recurro a ala copia, piratería o demás, todo es hecho por mí. (al menos modificadas las imágenes)
IMPORTANTE: EL JUEGO NO ESTÁ COMPLETO ASÍ QUE SI QUIEREN PROBARLO BIEN TIENEN QUE SELECCIONAR EL PERFIL 1



animaciones


Segundo proyecto

Esta es una versión mejorada del juego, la cual tiene un preloader, un puntero personalizado y otros detalles que son valiosos para darle estética y calidad al "juego", aclaro que este juego no tiene ni mira ni nada, es decir solo es la presentación, pero basta con estos dos miniproyectos para enseñarles cosas y para que vean que es realidad lo que digo, si no les basta miren los créditos, ahí está mi nombre y todo eso... bueno ahí va... Por si quieren verlo desde el principio le dan click secundario y le dan "Rebobinar" y luego "Reproducir"

link: http://img7.xooimage.com/files/7/2/9/juego-1e067fb.swf

crear

ACLARO QUE ALGUNAS IMÁGENES DEL JUEGO SON TOMADAS DE INTERNET PERO SON TOTALMENTE MODIFICADAS... USO PHOTOSHOP CS3 PARA ELLO, LA VERDAD LO RECOMIENDO DEMASIADO...


juegos

EMPECEMOS!!!!!!


Antes que nada, yo utilizo FLASH 8, lo pueden descargar portable en T!... además también utilizo Photoshop CS3, que también lo encuentran en Taringa!. ¬¬ Aclaro que se puede empezar de ceros, no necesitan saber al estilo profesional, solo tener ganas de aprender...

MENÚ DE POST...
1. Animar en movimiento y forma.
2. Que es MC, Botón y como manejarlos
3. Manejo de Textos
4. Importando cosas
5. ActionScript
6. Haciendo una mira
7. Matando un enemigo
8. Conclusiones


PRIMER PASO, LO BÁSICO...
ANIMAR EN MOVIMIENTO Y FORMA


Si ya sabes hacer animaciones de movimiento y forma en flash salta al paso 2...

Los pasos serán resaltados con formas rojas en las imágenes...


1.Abre flash y dale documento nuevo...
flash

2. Tenemos el entorno de flash, donde están los fotogramas, es decir un trozo de tiempo y espacio donde podemos "hacer" algo, ya sea dibujar, crear, poner imágenes etc... también tenemos un espacio (donde dice objetos) para poner MC's, botones y gráficos... -paso2-
animar

3. Con la herramienta circulo o rectángulo hacemos en el primer fotograma una figura.
Flash A Tus Pies...

4. Luego vamos al fotograma 30 o cualquiera -preferible mayor a 10- y le damos F6, nos creara 28 fotogramas normales y un fotograma clave a lo último...
aprender

5. Hacemos click en el último fotograma y hacemos doble click ala figura para seleccionar el relleno y el borde ya que flash los separa, luego arrastramos la figura a otro sitio.
animaciones

6. Enseguida hacemos click secundario en cualquier fotograma normal y le damos crear interpolación de movimiento, enseguida se creara una flechita negra y los fotogramas se pondrán morados, esto indica que la animación está hecha. (mirar el numero 2)
crear

7. Luego le das Ctrl+Enter para probar como ha quedado y debió quedar algo así...
juegos


flash


8. Ahora en un documento nuevo haz una figura en el primer fotograma clave...
animar

9. Luego presiona F6 en el fotograma 30 para crear 28 fotogramas normales y uno clave.
Flash A Tus Pies...

10. Después vas al último fotograma clave, de los unicos dos que hay y le das suprimir o del para borrar todo su contenido, quedará convertido en un fotograma vacio, osea sin nada... ¬¬
aprender

11. Luego has una figura distinta en el fotograma vacío...
animaciones

12. Por ultimo ve al panel de propiedades, haz click en un fotograma normal y luego le das Animar:forma... y debió quedar así

crear

juegos


flash



SEGUNDO PASO, QUE ES UN MC, UN BOTÓN Y SABER MANEJARLOS


Primero que todo empecemos con los MC, ese coso, un MC, no es más que un MovieClip, es decir un CLIP DE PELÍCULA, no quiero filosofar acerca de una verdad absoluta en su significado, simplemente pensemos, UN CLIP DE PELÍCULA, no es más, no es complejo, es una pequeña película hecha de varios fotogramas dentro de otra película, es decir nuestro documento principal. A los MC's, botones y gráficos se les llama SÍMBOLOS...

1. Creemos un documento nuevo en FLASH, y demos click en Insertar: Nuevo Símbolo
animar

2. Luego le damos click en Clip de Pelicula, y le damos cualquier nombre...
Flash A Tus Pies...

3. En el primer fotograma hagamos un muñeco en postura de caminar... recordemos que estamos en el CLIP DE PELÍCULA...
aprender

4. Luego creamos un fotograma clave, con F6, y le cambiamos la posición a las piernas...
animaciones

5. Luego seguimos haciendo lo mismo con cuantos fotogramas queramos, y le cambiamos la posición a lo que queramos, luego donde dice Escena 1 hacemos click para volver a la escena principal....
crear

6. Cuando estemos en la Escena 1 arrastramos el MC al área de trabajo, y tan solo nos ocupará un fotograma, por eso digo que es un Clip dentro de otro Clip...
juegos

7. Ahora hacemos una interpolación de movimiento con el clip de película, es decir lo movemos de un lado a otro, eso está en el paso anterior.
flash

8. Y debió quedar algo así...
animar


Flash A Tus Pies...


Como vemos se está moviendo de un lado a otro y mientras tanto realiza lo que está en sus fotogramas de Clip de Película...


Ahora los botones...

No creo que tenga que explicar que son los botones...

1.Abrimos un documento nuevo en flash y damos click en Insertar: Nuevo Simbolo.
aprender

2. Damos click en botón y le damos un nombre cualquiera.
animaciones

3. Luego tendremos un área de trabajo nueva con 1 fotogramas vacío... y cuatro estados de botón.
El estado REPOSO es para crear nuestro botón y será como se verá cuando no pasa nada, el estado SOBRE, es para cambiar nuestro botón de alguna manera cuando le pasemos el mouse encima, el estado PRESIONADO es lo que se va a ver cuando presionemos el botón y el estado ZONA ACTIVA es el área de boton posible...
crear

4. Así que en el fotograma vacío del estado REPOSO haremos nuestro botón... yo hice un circulo...
juegos

5. Luego hacemos click donde dice SOBRE y pulsamos F6 para que nos copie el fotograma anterior, pero ahora seleccionamos el relleno del botón y se lo cambiamos...
flash

6. Después hacemos lo mismo en presionado y le volvemos a cambiar el relleno... pero en zona activa tan solo presionamos F6 y no hacemos nada más
animar

7. Ahora como en el clip de película volvemos ala escena 1 y arrastramos el botón al área de trabajo...
Flash A Tus Pies...

8. Enseguida presionamos Ctrl+Enter para probar la película y debemos tener lo siguiente...
prueba los estados del botón para comprobar!!!!

aprender


animaciones


TERCER PASO, MANEJO DE TEXTOS


Este tema es simple...
Hay tres tipos de texto, el texto estático, el dinámico, y el texto de entrada... Su mismo nombre describe su función, simplemente el texto estático aparece y no cambia pero no quiere decir que no se pueda mover... el texto dinámico puede cambiar y el texto de entrada permite que el usuario escriba... Con un ejemplo sencillo podemos manejar los tres tipos de texto...

1. Abre un documento nuevo en Flash y presiona la A para crear una caja de texto...
por defecto y como en la imagen el texto está estático.
crear

2. Ahora haz una caja de texto estático y escribe "MI NOMBRE"... Recuerda que puedes cambiar las propiedades del texto al lado de donde aparece el tipo de texto. cosas como tamaño letra y demás...
juegos

3. Ahora has una caja de texto pero cambia el tipo de texto a INTRODUCCIÓN DE TEXTO y ponle un BORDE, en la imagen se explica... donde dice VAR ponle un nombre por ejemplo "minombre"
flash

4. Ahora crea un texto dinámico y donde dice VAR ponle el mismo nombre var de la caja de introducción de texto...
animar

5. Debió quedar algo así... prueba introducir texto!!!!! y se verá lo mismo abajo...
Flash A Tus Pies...


aprender


CUARTO PASO, IMPORTANDO COSAS


Aveces debemos importar sonidos y demás, así que flash no lo permite... Simplemente debemos hacer click en Archivo:Importar:Importar a Biblioteca y los archivos que seleccionemos pasaran a la biblioteca...
animaciones


Luego podemos arrastrar los archivos de la biblioteca al área de trabajo, por ejemplo si creamos un botón y en el fotograma del estado SOBRE colocamos un sonido, cuando pasemos el mouse encima del botón sonará el archivo de sonido....!!!!!

crear


QUINTO PASO, ACTIONSCRIPT


Este es un punto crucial ya que aprenderemos a manejar un lenguaje de programación, no a nivel profesional pero si cosas muy útiles. Este lenguaje de programación está orientado a objetos es decir abstrae elementos de la realidad y los maneja con lenguaje ... bueno esto no importa ahora. ... Lo que en mis tiempos libres he aprendido acerca de actionscript es sobre el manejo de cosas básicas en los MC's y botones. Para ilustrar un poco el lenguaje,

1. creemos un botón con sus estados correspondientes... y pongamolo en el fotograma 1.
juegos

2. Luego creemos una nueva capa, y en el primer fotograma de esa capa presionamos F9 y se nos abrirá un panel de acciones para introducir nuestro código actionscript, en el escribiremos stop();. esto hace que cuando probemos la película se detenga en el primer fotograma.
flash

3. Luego creamos otra capa, y en el segundo espacio hacemos click secundario y le damos Insertar fotograma clave, luego haremos una animación a nuestro gusto... con los fotogramas que queramos...
animar

Flash A Tus Pies...

4. Luego seleccionamos el botón y presionamos F9, para introducir código actionscript en el botón, OJO en el botón. Le pondremos el siguiente código: COPIENLO O ESCRIBANLO TAL CUAL PERO PRIMERO ENTIENDANLO QUE ES LO IMPORTANTE!!!!!
on(press) {
gotoAndPlay(2);
}


EXPLICACIÓN: on(press) quiere decir que cuando lo presionemos va a pasar algo, ese algo esta dentro de las llaves, el gotoAndPlay(2); es como la orden, es decir reproduzca el fotograma dos.

aprender

5. Debe quedar algo así...

animaciones


crear


Por otro lado voy a dar un consejo grande, cuando inserten código actionscript en un botón siempre utilicen on(algo aqui) y cuando sea un mc es onClipEvent(enterframe) ya que podrán tener problemas en esto... lo digo por que es básico lo que estamos aprendiendo ya que hay infinidad de posibilidades en lenguajes de programación

Esto es una probadita al actionscript realmente. Por ejemplo en el caso del botón con código la sentencia se puede reemplazar por:
on(press) {
play();

}

y hay millones de cosas por hacer. Por ejemplo vamos a cambiar el tamaño de algo cuando presionemos un botón...

1. Crea un botón con sus estados correspondientes, y luego haz un clip de película, que sea un rectángulo...
juegos

2. Enseguida colocale a clip de película o al rectángulo (seleccionandolo primero) un nombre de instancia...
en este caso le puse nombrex
flash

3. Luego selecciona el botón y presiona F9 para insertar el código:
on(press){
_root.nombrex._width=60;
_root.nombrex._height=10;
}

EXPLICACIÓN: on(press) es cuando yo presione este botón pasará lo que esté entre llaves... _root. quiere decir la raíz de algo, ese algo es nuestro rectángulo por eso ponemos nombrex , por último ._width y ._height es anchura y altura y le damos unos valores determinados, estas sentencias terminan en ; porque así se debe hacer, no quieren decir nada, es cuestión de sintaxis
animar

4. Se supone que debe quedar así:

Flash A Tus Pies...


aprender


SEXTO PASO, HACIENDO UNA MIRA


Bueno aquí viene una parte interesante, es cómo hacer una mira para simular tener un arma .

1. Abrimos un documento nuevo en flash, y creamos nuestra mira como queramos.
animaciones

2. La seleccionamos todita, y le hacemos click secundario para convertirla en un MC, pero le damos convertir en símbolo
crear
juegos

3. Luego seleccionamos la mira y le damos F9 para ingresar el código actionscript:

onClipEvent(enterFrame){
Mouse.hide();
this._x=_root._xmouse;
this._y=_root._ymouse;
}


EXPLICACIÓN: onClipEvent es decir en el evento del MC (enterframe) al entrar en el fotograma Mouse.hide(); esconder el mouse. this._x la posición en el eje x del MC (this es igual a esto ) es igual a _root._xmouse; la posición raíz del eje x del mouse, lo mismo con el eje y...

flash

4. Debería quedar así:

animar


Flash A Tus Pies...


SÉPTIMO PASO, MATANDO UN ENEMIGO


Ya que tenemos creada la mira, nos falta el enemigo, por ejemplo un pajarillo,un ave lo que sea. El caso...

1. Dibujamos un muñeco en una capa diferente ala de la mira y lo convertimos en clip de pelicula.
aprender

2. Luego hacemos doble click en él y le seleccionamos la cabeza y luego la convertimos en un botón.
animaciones

3. Enseguida creamos un fotograma clave después de haber hecho la cabeza del muñeco un símbolo y haremos una animación de muerte o desaparición en el muñeco.... y en el primer fotograma, sin seleccionar nada pondremos el código: stop();.
crear

4. Ahora seleccionamos la cabeza del muñeco osea el botón y le ponemos:
on(press){
gotoAndPlay(2);
}

es decir que si presionamos la cabeza del muñeco pasa a la animación de muerte!
RECORDEMOS PONER TAMBIÉN UN stop(); en el último fotograma de la animación de muerte

juegos


5. Ahora volvemos a la escena 1 y probamos la película!...

flash


animar


CONCLUSIONES


Casi por terminar este post, admito que es de mucha imaginación todo lo que podemos hacer con tan poco conocimiento. Por ejemplo,

En mi primer proyecto cada vez que haces click suena un disparo, eso es por que el fondo es un botón y cuando lo presionas entonces suena.
En mi segundo proyecto en puntero es un clip de pelicula el cual le hice lo mismo que ala mira, solo que le puse lo siguiente.
this._x+=_xmouse/3;
this._y+=_ymouse/3;


El + sirve para que la posición se acerqué a la del mouse mientras la del mouse es dividida en 3.

Flash A Tus Pies...


Amigos taringueros espero les haya gustado, y pues esperen otro post, la continuación de este, donde podremos interactuar con teclas, puntajes y demás, eso es todo por ahora.

Simplemente reitero en ser original, no copiar nada de nadie, simplemente investigar aprender y NO REPOSTEAR...
THE BLUE CORE

aprender

17 comentarios - Flash A Tus Pies...

superadolforemix
WOW todo eso lo aprendiste tu solito?! yo ni sabia como dibujar un muñequito
puwi
+10 buen post!!!
leondejuda777
Buen post.....!!!!!!
Clicka en cada una de las imagenes y Visita mis otros post...



papelera de reciclaje


Windows


Vista


server 2003 y windows se7en


como cambiar el icono a la papelera de reciclaje
stackman
Bastante bien, saludos !
goku14598
jajaja yo tambien aprendi a utilizar el flash solo ahora estoy con el Cs4 y batallando con el AS3 jaja muy buen aporte te doy mis 10 para que te hagas NFU... bienvenido y en dos dias podras dar puntos!!1
Th3_GroX
CHE DECIME UNA PAGINA PARA PODER SUBIR EL SFT Q ISE YO A Y

si me enseñas a subir van los 10