rubielenes-blog

[rubielenes-blog]

[rubielenes-blog]

MISIL

Para comenzar a hacer que el misil se desplace y nos marque el numero de pixeles que recorre en cierta cantidad de lanzamientos, primero debemos abrir el programa de Flash Professional en action script 3, con tamaño de 400x600 pixeles, después de haber abierto el archivo nuevo con esas propiedades, pasaremos a importar a biblioteca la imagen del misil que posteriormente debíamos editar en photoshop quitandole el fondo y cambiando el tamaño de los pixeles. Una vez importado, crearemos 3 capas, una llamada ‘’acciones,’’ otra llamada ‘’nave’’ y por ultimo llamada ‘’texto’’, la nave claro sera insertada en la capa nave, le daremos un nombre de instancia y en la capa texto insertaremos 3 textos ‘’Lanzamientos’’, ‘Distancia’’ y Pixeles, como texto estática.. posteriormente insertaremos dos cuadros de texto a lado de los estáticos, pero estos serán dinámicos y también tendrán nombre de instancia. Ya creado lo anterior, en capa acciones insertaremos en 3 fotogramas clave con sus respectivos códigos en ventana acciones( mostrados en las imágenes anteriores). presionamos ctrl+enter y listo, tendremos un misil en accion con sus respectivas medidas. 

[rubielenes-blog]

[rubielenes-blog]

Nave (Flash Professional)

Para comenzar a mover un objeto (en este caso utilizaremos la imagen png de una nave), abrimos el programa de adobe flash professional, un nuevo archivo de action script 3 con dimensiones de 350x550 px y con fondo negro. Comenzamos por crear dos capas una llamada acciones y otra llamada escenario, importamos a biblioteca la imagen de la nave y la arrastramos a escenario, en esa misma capa seleccionamos nuestro objeto y lo convertimos en símbolo, insertando un nombre de instancia. después de esto insertaremos 3 fotogramas clave, abriremos la pestaña ventana; opción acciones, en el primer fotograma insertaremos el primer código que sera el nombre de instancia que colocamos y ‘’.x’’, en el segundo fotograma colocaremos el nombre de instancia ‘’.y = nombre de instancia.y=3′’ y por ultimo colocamos en el 3er fotograma el código; gotoAndPlay(2); daremos Ctrl+enter y corremos el programa, listo. 

[rubielenes-blog]

Flash Professional

Para comenzar a familiarizarnos con el programa y con que a partir de ahora empezaremos a utilizar códigos para nuestras animaciones, abriremos el programa días professional y seleccionaremos la opción ActionScript3, y como nuestro encuadre seleccionaremos 550x550 pixeles, luego de esto crearemos 2 nuevas capas, una llamada actions y otra llamada levels , a continuación nos posicionamos en la ultima capa que creamos y nos colocaremos en la parte de arriba donde seleccionaremos el cuadro de Ventana, que nos desplegará más opciones, y de estas seleccionamos "acciones", o bien podemos acceder a ella directamente desde f9. Una vez abierto el recuadro y para finalizar escribiremos "stop();" en la primera línea... (continuará)

[rubielenes-blog]

Bocetos Personaje (color)

[rubielenes-blog]

Bocetos

[rubielenes-blog]

Duende (caída, walking cycle)

Para comenzar abrimos un nuevo documento HTML5 Canvas, con medidas de 1920x1080px. Una vez hecho esto, sobre nuestra primer capa colocaremos la imagen donde trazaremos nuestros duendes, la ajustamos a la hoja y la bloqueamos. Después de haber hecho eso, crearemos una segunda capa, en la cual vamos a  vectorizar cada uno de los duendes con la pluma, en este caso se muestra una secuencia del duende cayéndose. Ya vectorizado cada uno de ellos, vamos a eliminar nuestra primer capa porque ya no es necesario utilizarla.

Seleccionaremos cada uno de los duendes y los agrupamos seleccionando ctrl+g. Hecho esto seleccionamos la hilera de duendes, damos click derecho y escogemos la opción “Distribuir en capas”, en este caso la ultima capa corresponderá al primer duende, la penúltima al segundo y así con cada uno de ellos, por lo tanto la ultima capa la dejaremos en el primer fotograma, la penúltima la arrastraremos al 2do fotograma y así con cada uno, hasta que queden en forma de escalera.

Ya hecho esto, si damos play a nuestro video, seleccionando 8 o 9 fotogramas p/s, nuestro duende avanzara. Sin embargo, para colocarlo sobre una sola posicion y no se desplace, lo que debemos hacer es irnos a todas nuestras capas y en cada una seleccionaremos a nuestro duende y lo alinearemos en el documento, de esta manera al dar click en play, el duende se movera en un solo lugar.

Exportamos video y finalizamos.

https://www.youtube.com/watch?v=A0P9DCMAdIk&feature=youtu.be

[rubielenes-blog]

Duende (walking cycle)

Para comenzar abrimos un nuevo documento HTML5 Canvas, con medidas de 1920x1080px. Una vez hecho esto, sobre nuestra primer capa colocaremos la imagen donde trazaremos nuestros duendes, la ajustamos a la hoja y la bloqueamos. Después de haber hecho eso, crearemos una segunda capa, en la cual vamos a  vectorizar cada uno de los duendes con la pluma, en este caso se muestra una secuencia del duende a punto de caerse. Ya vectorizado cada uno de ellos, vamos a eliminar nuestra primer capa porque ya no es necesario utilizarla. 

Seleccionaremos cada uno de los duendes y los agrupamos seleccionando ctrl+g.. Hecho esto seleccionamos la hilera de duendes, damos click derecho y escogemos la opción “Distribuir en capas”, en este caso la ultima capa corresponderá al primer duende, la penúltima al segundo y así con cada uno de ellos, por lo tanto la ultima capa la dejaremos en el primer fotograma, la penúltima la arrastraremos al 2do fotograma y así con cada uno, hasta que queden en forma de escalera.

Ya hecho esto, si damos play a nuestro vídeo, seleccionando 8 o 9 fotogramas p/s, nuestro duende avanzara. Sin embargo, para colocarlo sobre una sola posición y no se desplace, lo que debemos hacer es irnos a todas nuestras capas y en cada una seleccionaremos a nuestro duende y lo alinearemos en el documento, de esta manera al dar click en play, el duende se moverá en un solo lugar.

Exportamos vídeo y finalizamos. 

https://youtu.be/LOxEhZm-f8s

[rubielenes-blog]

Gallop Cycle (Cuadrúpedo)

Para comenzar debemos realizar un nuevo documento, HTML5 Canvas, en este caso yo utilice de tamaño 1920x1080 px. Una vez creado el documento insertaremos cada dibujo en diferente movimiento, esta vez se tratara de un cuadrúpedo galopando. Ya creados los dibujos, seleccionaremos cada uno y presionaremos ctrl+G para agruparlos. Una vez agrupados volveremos a seleccionar todos, daremos click derecho y seleccionaremos la opción ‘’Distribuir en capas”, una vez distribuidos eliminamos la primer capa.

La ultima capa corresponderá al primero de los dibujos, la penúltima al segundo y así constante, por lo tanto la ultima capa el fotograma quedara sobre 1, la penúltima capa jalaremos el fotograma hasta el 2, y asi con cada una de las capas hasta que quede escalado.

Una vez hecho esto, alinearemos nuestros dibujos, seleccionamos cada uno y los colocamos en la misma posición, cambiamos a 9 o inclusive hasta 12 fotogramas p/s de manera que al iniciar el vídeo podremos observar como nuestro cuadrúpedo ya esta galopando (:

Exportamos vídeo para finalizar.

https://www.youtube.com/watch?v=bTIIm4GyiOA&feature=youtu.be

[rubielenes-blog]

Canter Cycle (Cuadrúpedo)

Para comenzar debemos realizar un nuevo documento, HTML5 Canvas, en este caso yo utilice de tamaño 1920x1080 px. Una vez creado el documento insertaremos cada dibujo en diferente movimiento, esta vez se tratara de un cuadrúpedo a medio galope. Ya creados los dibujos, seleccionaremos cada uno y presionaremos ctrl+G para agruparlos. Una vez agrupados volveremos a seleccionar todos, daremos click derecho y seleccionaremos la opción ‘’Distribuir en capas”, una vez distribuidos eliminamos la primer capa.

La ultima capa corresponderá al primero de los dibujos, la penúltima al segundo y así constante, por lo tanto la ultima capa el fotograma quedara sobre 1, la penúltima capa jalaremos el fotograma hasta el 2, y asi con cada una de las capas hasta que quede escalado.

Una vez hecho esto, alinearemos nuestros dibujos, seleccionamos cada uno y los colocamos en la misma posición, cambiamos a 9 o inclusive hasta 12 fotogramas p/s de manera que al iniciar el vídeo podremos observar como nuestro cuadrúpedo ya esta galopando (:

Exportamos vídeo para finalizar.

https://youtu.be/0RRmo0_70dg

[rubielenes-blog]

Trot Cycle (Cuadrúpedo)

Para comenzar debemos realizar un nuevo documento, HTML5 Canvas, en este caso yo utilice de tamaño 1920x1080 px. Una vez creado el documento insertaremos cada dibujo en diferente movimiento, esta vez se tratara de un cuadrúpedo trotando. Ya creados los dibujos, seleccionaremos cada uno y presionaremos ctrl+G para agruparlos. Una vez agrupados volveremos a seleccionar todos, daremos click derecho y seleccionaremos la opción ‘’Distribuir en capas”, una vez distribuidos eliminamos la primer capa.

La ultima capa corresponderá al primero de los dibujos, la penúltima al segundo y así constante, por lo tanto la ultima capa el fotograma quedara sobre 1, la penúltima capa jalaremos el fotograma hasta el 2, y asi con cada una de las capas hasta que quede escalado.

Una vez hecho esto, alinearemos nuestros dibujos, seleccionamos cada uno y los colocamos en la misma posición, cambiamos a 9 o inclusive hasta 12 fotogramas p/s de manera que al iniciar el vídeo podremos observar como nuestro cuadrúpedo ya esta trotando (:

Exportamos vídeo para finalizar.

https://www.youtube.com/watch?v=ZWTNhBxIAoQ

[rubielenes-blog]

Walk Cycle (Cuadrúpedo)

Para comenzar debemos realizar un nuevo documento, HTML5 Canvas, en este caso yo utilice de tamaño 1920x1080 px. Una vez creado el documento insertaremos cada dibujo en diferente movimiento, esta vez se tratara de un cuadrúpedo caminando. Ya creados los dibujos, seleccionaremos cada uno y presionaremos ctrl+G para agruparlos. Una vez agrupados volveremos a seleccionar todos, daremos click derecho y seleccionaremos la opción ‘’Distribuir en capas”, una vez distribuidos eliminamos la primer capa.

La ultima capa corresponderá al primero de los dibujos, la penúltima al segundo y así constante, por lo tanto la ultima capa el fotograma quedara sobre 1, la penúltima capa jalaremos el fotograma hasta el 2, y asi con cada una de las capas hasta que quede escalado.

Una vez hecho esto, alinearemos nuestros dibujos, seleccionamos cada uno y los colocamos en la misma posición, cambiamos a 9 o inclusive hasta 12 fotogramas p/s de manera que al iniciar el vídeo podremos observar como nuestro cuadrúpedo ya esta caminando (:

Exportamos vídeo para finalizar.

https://youtu.be/sD42qDdMyU8

[rubielenes-blog]

Manos

Para realizar esta actividad sera necesario abrir nuestro software Animate, con un archivo HTML5Canvas. con medidas de 850x480 px. una vez abierto el programa, colocaremos nuestra imagen en la capa 1, la cual después tendremos que bloquear. Seguido crearemos otra capa en la cual utilizaremos la herramienta pluma o pincel para remarcar los contornos de cada una de las manos, de esta manera quedaran vectorizadas. Una vez terminadas todas las manos, sera necesario eliminar la primer capa y listo (:

[rubielenes-blog]

Skip cycle

Para comenzar debemos realizar un nuevo documento, HTML5 Canvas, en este caso yo utilice de tamaño 1920x1080 px. Una vez creado el documento insertaremos cada dibujo en diferente movimiento, esta vez nuestro personaje estara saltando feliz, una vez creados los dibujos, seleccionaremos cada uno y presionaremos ctrl+G para agruparlos. Una vez agrupados volveremos a seleccionar todos, daremos click derecho y seleccionaremos la opción ‘’Distribuir en capas”, una vez distribuidos eliminamos la primer capa.

La ultima capa corresponderá al primero de los dibujos, la penúltima al segundo y así constante, por lo tanto la ultima capa el fotograma quedara sobre 1, la penúltima capa jalaremos el fotograma hasta el 2, y asi con cada una de las capas hasta que quede escalado.

Una vez hecho esto, alinearemos nuestros dibujos, seleccionamos cada uno y los colocamos en la misma posición, de manera que al iniciar el vídeo podremos observar como nuestro dibujo ya esta saltando (:

https://youtu.be/ItKIzE6IQWg

[rubielenes-blog]

Tip Toe

Para comenzar debemos realizar un nuevo documento, HTML5 Canvas, en este caso yo utilice de tamaño 1920x1080 px. Una vez creado el documento insertaremos cada dibujo en diferente movimiento, esta vez nuestro personaje estara caminando de puntas, una vez creados los dibujos, seleccionaremos cada uno y presionaremos ctrl+G para agruparlos. Una vez agrupados volveremos a seleccionar todos, daremos click derecho y seleccionaremos la opción ‘’Distribuir en capas”, una vez distribuidos eliminamos la primer capa.

La ultima capa corresponderá al primero de los dibujos, la penúltima al segundo y así constante, por lo tanto la ultima capa el fotograma quedara sobre 1, la penúltima capa jalaremos el fotograma hasta el 2, y asi con cada una de las capas hasta que quede escalado.

Una vez hecho esto, alinearemos nuestros dibujos, seleccionamos cada uno y los colocamos en la misma posición, de manera que al iniciar el vídeo podremos observar como nuestro dibujo ya esta caminando de puntas (:

https://youtu.be/7yCoKGIcNgg

[rubielenes-blog]

Run fast cycle

Para comenzar debemos realizar un nuevo documento, HTML5 Canvas, en este caso yo utilice de tamaño 1920x1080 px. Una vez creado el documento insertaremos cada dibujo en diferente movimiento, esta vez nuestro personaje estara corriendo apresuradamente, una vez creados los dibujos, seleccionaremos cada uno y presionaremos ctrl+G para agruparlos. Una vez agrupados volveremos a seleccionar todos, daremos click derecho y seleccionaremos la opción ‘’Distribuir en capas”, una vez distribuidos eliminamos la primer capa.

La ultima capa corresponderá al primero de los dibujos, la penúltima al segundo y así constante, por lo tanto la ultima capa el fotograma quedara sobre 1, la penúltima capa jalaremos el fotograma hasta el 2, y asi con cada una de las capas hasta que quede escalado.

Una vez hecho esto, alinearemos nuestros dibujos, seleccionamos cada uno y los colocamos en la misma posición, de manera que al iniciar el vídeo podremos observar como nuestro dibujo ya esta corriendo (:

https://youtu.be/gWw49fmxspk