Esta animacin lo hice por inspiracin de un video institucional que vi y lo plasme en papel. Decid hacer un tutorial ya que me parece un efecto interesante que se puede usar en todo momento.

Empezamos esta animacin, creando un cuadrado de 80 por 80 pxeles, le ponemos color de fondo, color de borde y le damos un valor de 1 menos al borde dependiendo de cmo queramos que se vea.

El cuadrado que dibujamos, lo multiplicamos varias veces hasta formar una franja horizontal. Nuestro ejemplo ser de 12 cuadrados de ancho por 4 de alto. A esta capa la llamaremos cuadrados.

Nota: Tienen que recordar que todos los cuadrados estn en una sla capa y que ninguno se cruza entre si, por ello hay que tener mucho cuidado.

As quedara nuestra franja de cuadrados.

Importamos una imagen a nuestra biblioteca, la que queremos que se vea en nuestra animacin.

Luego seleccionamos cualquiera de nuestros cuadrados y le hacemos doble clic; ya seleccionado (borde y fondo) vamos a nuestro panel de color y en el tipo, seleccionamos Bitmap o Mapa de bits, nos saldr la imagen que hemos importado.

Cuando le damos click a la imagen, el cuadrado que hemos seleccionado cambiar y aparecer parte de la imagen. Ahora viene lo interesante. Queremos que en el resto de cuadrados se vea tambin la imagen, entonces debemos seguir el siguiente procedimiento:

Seleccionamos nuestra herramienta Saint bucket Tool o Bote de pintura y damos click a cada uno de los cuadrados incluyendo el cuadrado que seleccionamos al principio.

Se vern varias miniaturas de la imagen, pero no se preocupen es solo un inicio, quedara as

Lo siguiente es seleccionar la herramienta Gradient Transform y elegir cualquiera de los cuadrados, preferible el del centro. Esta herramienta nos permitir ampliar nuestra imagen por todos los cuadrados por eso cada uno de los cuadrados le pusimos de fondo la misma imagen.

Detalle del procedimiento de ampliacin.

Estiramos nuestra imagen, de cualquiera de las formas vistas quedando de la siguiente forma:

Hasta ahora hemos completado la primera parte de la animacin, si nos ponemos a animar cada uno de los cuadrados nos llevaremos una gran sorpresa, solo animaramos los cuadrados y la imagen se vera una parte para todos y todo el trabajo que nos costo animarlo seria en vano.

Cmo animar sin problemas?

Seleccionamos todos los cuadrados para luego elegir el nico fotograma de la capa cuadrados, vamos al men Modify/ Time line/ Distribute to Layers, tal como se muestra en la imagen.

En espaol sera Modificar/ Lnea de Tiempo/ Distribuir en capas.

Luego de unos segundos, la cantidad de capas ser igual a la cantidad de cuadrados existentes, es decir muchas. En esta animacin son 48 capas y el orden de ellas depender en el orden como las creaste, copiaste y tambin donde fueron colocadas.

Ahora nos toca animar cada una de las capas con interpolacin de movimiento donde la primera capa tendr alfa 0% y el ltimo alfa 100%, dando 5 fotogramas de entre cada fotograma clave.

Avanzamos 1 fotograma para cada uno de las capas interpoladas, tratando de que ninguna quede encima de la otra, para que todos los cuadrados aparezcan tal y como se muestra en la imagen.

En este caso se hizo en desorden para que tuviera una mejor presentacin.

Insertamos 3 fotogramas despus del ltimo fotograma clave en la capa superior para luego completar los fotogramas en el resto de las capas y queden todas alineadas, en nuestro ejemplo al frame 55.

Presionan ctrl + enter, aun no se ver nada, slo una parte de la imagen repetida varias veces, el detalla de esta animacin es que tenemos que fusionar parte de la imagen con el cuadrado.

Para eso seleccionamos la capa, la ponemos en cualquiera de los fotogramas clave y hacemos doble clic, como si furamos a modificar el objeto pero solo lo agruparemos, con ctrl + G o men Modificar/ Agrupar.

A cada capa le hacemos lo mismo, agrupamos el cuadrado, ahora presionen ctrl + enter y vern la animacin casi completa

Ya tenemos la animacin! Ahora mencionaremos los detalles para darle ms vida. Nos posicionamos en la ltima capa y en el ltimo fotograma clave e insertamos 10 fotogramas, en el ltimo ponemos fotograma clave presionando F6 y a los dems igual, pero slo presionando la tecla F6, quedando la lnea de tiempo de esta manera.

La razn por la que se inserto esos 10 fotogramas era para cuando termine de armarse nuestra imagen aparezca la imagen original, entonces todos los ltimos fotogramas tendrn que tener alfa a 0.

Insertamos una capa que la llamaremos Imagen y arrastramos de nuestra libreria la imagen usada, si, la misma imagen con la que creamos la animacin de los cuadraditos y la ubicamos en los ltimos fotogramas que agregamos. Creamos una interpolacin que empiece en alfa 0% y al final alfa 100%, para que se detenga cuando termina la animacin insertamos otra capa y ponemos Stop al final, tal y como se muestra en la imagen.

Un detalle adicional (para terminar) Hagamos una pequea transparencia que muestre un brillo especial antes que aparezca parte de la imagen.

Creamos un cuadrado del mismo tamao que usamos para la animacin slo que no le daremos un color slido, sino que sea medio transparente. A este cuadradito lo convertimos en Movie Clip pulsando F8, luego hacemos una interpolacin poniendo el fotograma 1, 5 y 10 como fotograma claves, solamente al primer y ltimo fotograma se le pone alfa a 0%.

Luego insertamos otra capa y ponemos un fotograma clave vaci (F6) con un Stop. As se vera.

Nos resta insertar el cuadrado transparente antes de cada interpolacin, para que cuando empiece la animacin haya un ligero resplandor y aparezca parte de la imagen.

Para poner el cuadrado insertamos una capa encima o debajo de la interpolacin y no es necesario que termine o se extienda hasta el final, slo que dure lo que dura la animacin del cuadrado, en esta caso 10 fotogramas.

Y el ejemplo es este:

Efecto De Animacin El Tnel Del Tiemo Con Flash CS3 (parte 1)

por jmx en Action Script, Animacin, Tutoriales24 de August de 2009 22:00 pm

0

Tutorial Adobe Flash CS3 Efecto De Animacin El Tnel Del Tiempo. Hola te doy la bienvenida a otro de los sensacionales tutoriales que se presentan en esta Web jajaja. A continuacin te presento un tutorial de lo mas bsico se hay en la animacin Adobe Flash CS3. Para hacer este tutorial solamente tienes que crear un smbolo de tipo Clip de pelcula, posterior mente crear una animacin con la aplicacin de una Mscara. Tambin aprenders hacer suso de la herramienta (valo simple). Los pasos a seguir son descritos a continuacin. En este trabajo quise hacer un efecto que logre hipnotizar. Este trabajo te puede servir para los banners o como un efecto para un botn, el tutorial solamente tiene una lnea de AtionScript 2.0 (stop;). Sin ms prembulos COMENZAMOS? Good luck!

1)-. Comenzar por colocar las propiedades al nuestra pelcula (ctrl. + J).

a)-. Las dimensiones de tamao para este trabajo son de 300 px * 300 px de ancho y de alto respectivamente.

b)-. Usar como color de fondo #000000.

c)-. Alterar la velocidad de fotogramas a 25 fps.

2)-. Insertar el nico smbolo (ctrl. + J) con el que cuenta esta pelcula.

a)-. Nombrar a este smbolo (animacin valo).

b)-. Seleccionar el la opcin Tipo Clip de pelcula.

3)-. Una ves que estes ubicado en el clip de pelcula, cambiarle el nombre a la capa (rectngulo).

a)-. Posteriormente seleccionar la herramienta de Rectngulo.

b)-. Antes de dibujar la forma vectorial seleccionada, colocarle las propiedades, esta forma carece de (Color de trazo borde) colocar como color de relleno #FFFFFF.

c)-. Una ves que quedaron establecidas las propiedades dibujar la forma vectorial con medidas 300.0 px * 300.0 px de ancho y alto.

d)-. Colocar esta forma en coordenadas X: 0.0 Y: 0.0.

4)-. Insertar una segunda capa y cambiarle el nombre por el de (valo). Esta capa nos servir posteriormente como una mscara con una animacin de forma.

a)-. Seleccionar la herramienta de (valo simple), co colocar le a esta forma vectorial borde, seleccionar como color de relleno el color #FFFFFF (yo use otro color de relleno pero solo para fines prcticos).

b)-. Escribirle como nmero de Radio Interior 90, seleccionar la casilla (Cerrar trazo).

c)-. Las dimensiones de este valo son 450.0 px * 450.0 px de ancho y de alto.

d)-. Colocar esta forma vectorial, en coordenadas X: -75.0 Y: -75.0.

5)-. A partir de este paso se dar comienzo con la (animacin).

a)-. Comenzar por insertar un fotograma clave (F6) en la posicin (# 35) de la capa (valo).

b)-. Reducir el smbolo (valo) a dimensiones de 1.0 px * 1.0 px de ancho y de alto, para hacer este procedimiento lo ms recomendable es que vayas disminuyendo poco a poco el tamao del valo y al mismo tiempo ir aumentando de tamao la escena (zoom 2000 %).

c)-. Una ves que tienes reducido el smbolo colocar este en coordenadas X: 149.5 Y: 149.5, estas coordenadas es el centro de la escena.

6)-. Luego insertar un fotograma (F5) tambin en la posicin (# 35), pero ahora en la capa (rectngulo).

7)-. Proceder a convertir la capa normal, en una capa de tipo (mscara).

a)-. Seleccionar la capa (valo), luego hacer clic con el botn derecho del ratn.

b)-. En el men desplegado seleccionar la opcin de Mscara.

Efecto De Animacin El Tnel Del Tiemo Con Flash CS3 (parte 2)

por jmx en Action Script, Animacin, Dibujo, Tutoriales25 de August de 2009 03:00 am

7

Continuar con la segunda parte del tutorial, en esta segunda parte del tutorial se regresara a la escena del la pelcula para proceder a introducir el smbolo creado con la animacin.

8)-. En la imagen que se muestra es como deben de quedar la dos capa una vez que se ha insertado la mscara.

9)-. Para hacer la animacin de la capa (valo) basa con seleccionar un fotograma (entre el # 1 y el # 34).

a)-. Luego en el (Panel de Propiedades), en la opcin (Animar) seleccionar (Forma).

10)-. Regresar a la (Escena), y cambiarle el nombre a la capa por el de (animacin 1).

a)-. Hacer visible el panel de (Biblioteca ctrl. + L), arrastrar desde este panel el smbolo (animacin valo) asa la (Escena).

b)-. Colocar este smbolo en coordenadas X: 0.0 Y: 0.0.

11)-. Insertar un fotograma (F5) en la posicin (# 35) de esta capa.

12)-. Insertar una nueva capa y cambiarle el nombre por el de (animacin 2).

a)-. Insertar un fotograma clave vaco (F7) en la posicin (# 10) de esta nueva capa.

b)-. Arrastrar nuevamente el smbolo desde la biblioteca, y colocarlo en el fotograma # 10.

c)-. Colocar este smbolo en coordenadas X: 0.0 Y: 0.0.

13)-. Insertar 3 capas ms (animacin 3, animacin 4 y animacin 5).

a)-. Repetir el paso 11, solo que ahora los fotogramas clave vacos estarn en las posiciones # 15, # 20 y # 25 respectivamente.

b)-. A continuacin se te muestra la imagen de cmo queda la lnea de tiempo un ves que se insertaron las cinco capas con su respectiva animacin cada una de ellas.

14)-. Para finalizar con el tutorial solamente hay que insertar una capa ms, cambiarle el nombre por el de (ActionScript).

a)-. Insertar un fotograma clave vaco (F7) en la posicin (# 35) de esta capa.

b)-. Seleccionar el fotograma insertado, abrir el panel de (Acciones fotograma).

c)-. Luego escribir esta lnea de cdigo ActionScript.

stop();

Con este paso doy por concluido el tutorial, espero que no tengas muchas complicaciones para hacer este trabajo. Como te puedes dar cuanta la animacin que se aplica es muy fcil de hacer. Well done!

P.D. presionar ctrl. + Enter y ver como es que queda la pelcula, yo realice una pequea modificacin a cada uno de los valos a ver que te prese. Si tienes alguna duda no dudes en hacrmelo saber a travs de tus comentarios. Hasta pronto nos vemos en el prximo tutorialJ.

Botn Efecto Degradado En Flash CS3

por jmx en Animacin, Descargas FLA, Dibujo, Tutoriales15 de October de 2009 11:42 am

1

Tutorial Adobe Flash CS3. Crear Botn De Dos Posiciones Con Colores Degradados. Hola en el siguiente tutorial de Flash CS3 aprenders a crear un botn de dos posiciones (Reposo y Sobre), este tutorial es de los ms fciles de hacer pero a la mismos tiempo crear botones son de mucha importancia ya que si ellos no se podran enlazar las diferentes Web. Aqu aprenders una tcnica para aplicar un efecto con color de relleno degradado, tambin aprenders como aplicar color (Alfa) y por ltimo sabrs cual es la aplicacin de la (Herramienta Transformacin De Degradado). Cabe mencionar que este efecto no posee una sola lnea de cdigo ActionScript. Sin ms prembulos COMENZAMOS? Good Luck!

1)-. El primer paso es colocar las propiedades del documento en al cual se va a trabajar. En esta ocasin se trabajara sobe un documento dimensiones 120 * 80 pxeles de ancho y alto.

a)-. Colocar como color de fondo para esta pelcula #00FFFF.

b)-. La velocidad de fotogramas ser de 12 fps.

2)-. Luego de crear las dimensiones, insertar el nico smbolo (ctrl. + F8) de que consta la pelcula.

a)-. Colocar como nombre a este smbolo (botn).

b)-. Seleccionar la opcin de (Botn).

3)-. Una vez creado el smbolo botn, abrir el panel de (Color Shift + F9)

a)-. En este panel anular el color de borde, y seleccionar en la opcin (Tipo Lineal), y luego seleccionar el color de relleno.

b)-. Los colores que se usaran en el color degradado son #FFFFFF en el lado izquierdo y #000000 en el lado derecho.

c)-. Cuando estn establecidos los colores para el degradado reducir el color alfa al 50%. Reducir el color alfa en los dos clores #FFFFFF y #000000.

4)-. As con el paso anterior quedara establecido el color degradado lineal y cuando se dibuje alguna forma vectorial automticamente ser rellenada con este color.

a)-. Seleccionar la herramienta de rectngulo (R), dibujar esta forma vectorial con dimensiones de 100.0 * 25.0 pxeles de ancho y de alto.

b)-. Colocar este diseo en coordenadas X: 0.0 Y: 0.0.

5)-. Insertar un fotograma clave (F6) en la posicin (Sobre).

a)-. Seleccionar la herramienta (Trasformacin de degradado F).

b)-. Seleccionar el crculo que aparece en la posicin superior derecha del rectngulo.

6)-. Girar manualmente esta posicin hasta que el crculo quede en la parte inferior izquierda del rectngulo. As cuando se publicado el botn y se coloque el cursor sobe el cambiara la posicin del degradado.

7)-. Regresar a la Escena, posteriormente hacer visible el panel de la Biblioteca (ctrl.+L).

a)-. Arrastrar el smbolo (botn) que esta en la biblioteca hacia la Escena.

b)-. Colocar este smbolo en coordenadas X: 10.0 Y: 10.0.

8)-. Arrastrar una vez ms el smbolo botn desde la biblioteca.

a)-. Colocar este smbolo en coordenadas X: 10.0 Y: 45.0.

9)-. Por ltimo agregar un texto esttico a casa uno de los botones (Botn 01, Botn 02).

Con este paso queda finalizado el tutorial de hoy, como te podrs observar los pasos a seguir son muy fciles de aprender. Well Done!

P.D. presionar ctrl. + enter y visualizar el trabajo realizado, si tienes alguna duda o sugerencia no dudes en dejar tu comentario y este ser atendido a la menor brevedad posible. Hasta muy pronto.

Efecto Llenar Un Vaso Con Agua Y Botones De Play Y Stop

por jmx en Action Script, Animacin, Tutoriales27 de November de 2009 16:31 pm

0

Tutorial Adobe Flash CS3. Animacin Llenar Con Aguan Un Vaso Con Botones De Cerrar Y Abrir El Grifo. En esta ocasin te expondr una tercera parte del tutorial animacin llenar con agua un vaso, esta idea surgi de Karen Gonzlez Madrid ella me autorizo a que hiciera y publicara este tutorial. Aqu explico como hacer un smbolo con la aplicacin de botn y posteriormente colocarle unas cuantas lneas de cdigo ActionScript 2.0 y de esta forma hacer que la animacin se detenga e inicie a nuestra voluntad. En esta animacin se simula que se esta llenando de agua un vaso. Para hacer este trabajo basta con aplicar animaciones de Tipo Forma, aplicar en una capa la opcin de Mscara. Sin mas prembulos y como la practica hace al maestro COMENZAMOS? Good Luck!

Como ya te mencione al principio este tutorial parte de un trabajo ya realizado, aqu las partes del tutorial anterior.

Parte unoParte dos

1)-. Para hacer este nuevo tutorial, comenzar por crear un nuevo smbolo (ctrl. + F8).

a)-. Colocarle como nombre al smbolo (botn estandar).

b)-. En la opcin tipo seleccionar (Botn).

2)-. Ubicado en el smbolo (botn estandar), hacer un pequeo diseo de un botn de tres estados. En esta ocasin te mostrare como hacer un botn rectangular con bordes redondeados.

a)-. Hacer clic en el icono de la herramienta rectngulo.

b)-. Luego en el men desplegado seleccionar la opcin (Herramienta Rectngulo simple).

3)-. Seleccionada la herramienta. Proceder a colocarle las propiedades al rectngulo a dibujar.

a)-. El rectngulo debe de estar sin color de borde y colocar como color de relleno el color azul con efecto de relleno radial.

b)-. Las dimensiones del rectngulo son de 200.0 * 30.0 pxeles de ancho y de alto.

c)-. Colocar la forma vectorial dibujada en coordenadas X: 0.0 Y: 0.0.

d)-. Para terminar con las propiedades del rectngulo colocar el nmero 10 en la casilla de (Radio de la esquina del rectngulo).

4)-. Insertar en la posicin sobre de la lnea de tiempo un fotograma clave (F6).

a)-. A este rectngulo cambiarle el color de relleno por el color rojo con efecto radal.

b)-. Posteriormente colocar el nmero 0 en la casilla de (Radio de la esquina del rectngulo).

5)-. Insertar un tercer fotograma clave (F6) en la posicin (Presionado).

a)-. Cambiar el color de relleno al rectngulo por el de verde con efecto radial.

b)-. Luego colocar nuevamente el nmero 10 en la casilla de (Radio de la esquina del rectngulo).

Con esto queda establecido un pequeo diseo de un botn de tres estados con bordes redondeados

6)-. Ahora comenzar a colocar las lneas de cdigo ActionScript 2.0, primero regresar a la Escena en donde esta la animacin, si no has hecho la animacin aqu puedes (descargar el archivo fla) del trabajo anterior.

a)-. Colocado en la Escena seleccionar la capa de nombre (vaso), y hacer clic sobre el fotograma # 1.

b)-. Luego abrir el panel de (Acciones fotograma) y escribir.

stop();

7)-. Ubicado en la misma capa (vaso), abrir el panel la Biblioteca (ctrl. + L).a)-. Arrastrar desde la biblioteca el smbolo (botn estandar), hacia la Escena.

b)-. Colocar este smbolo en coordenadas X: 23.0 Y: 340.0.

8)-. En este paso seleccionar la forma vectorial no el fotograma.

a)-. Abrir el panel (Acciones- botn) y escribir.

on (release) {

play();

}

9)-. Arrastrar nuevamente desde la biblioteca (ctrl. + L) el smbolo (botn estandar).

a)-. Colocar el smbolo en coordenadas X: 330.0 Y: 340.0.

10)-. Seleccionar este nuevo smbolo no el fotograma.

a)-. En el panel de (Acciones botn) escribir el cdigo.

on (release) {

stop();

}

11)-. Para concluir con estas pequeas modificaciones solo falta insertar dos textos en el rectngulo de la izquierda escribir un (PLAY) y en el rectngulo de la derecha escribir (STOP).

Con este paso se da por concluido el trabajo. Well done!

Nota: si se llega a presentar un error en la animacin es debido a que no tienes configurado la versin de ActionScript 2.0. Para solucionar este pequeo inconveniente.

a)-. Hacer visible el panel de (Configuracin de publicacin Ctrl. + J).

b)-. Luego dar clic en a casilla de (Versin de ActionScript).

c)-. Despus simplemente seleccionar la opcin de (ActionSctipt 2.0) y aceptar los cambios de la configuracin.

P.D. presionar ctrl. + Enter para visualizar el trabajo. Como te puedes dar cuanta la animacin no comienza avanzar hasta que das clic en el botn de PLAY y puedes parar la animacin si das clic en el botn de STOP. Se agradecen de antemano los comentarios que en este tutorial se puedan exponer y as todos aprender. Gracias por visitar esta Web y hasta pronto Curso Bsico De Flash 8 (Conceptos Bsicos De Flash) Parte 1

por jmx en Dibujo, Manuales, Tutoriales17 de September de 2008 16:00 pm

2098http://www.estiloflash.com/curso-basico-de-flash-8-parte-1/209/Curso+B%C3%A1sico+De+Flash+8+%28Conceptos+B%C3%A1sicos+De+Flash%29+Parte+1+2008-09-17+19%3A00%3A19jmx

Bienvenido Al Curso Bsico De Flash 8, este curso esta dirigido particularmente a personas que estn iniciando con el aprendizaje de flash, y aqu aprenders desde como crear un documento nuevo, la utilizacin de las principales herramientas, tambin aprenders a utilizar los principales paneles de diseo, al finalizar el curso sabrs como hacer visibles los paneles y herramientas de diseo web con el mtodo de teclas, el mtodo del teclado hace que los trabajos se realicen con mayor prontitud. Tambin aprenders los conceptos bsicos que se manejan en la lnea de tiempo y hasta como hacer animaciones de textos y aplicacin de botones. Una vez que hayas concluido con la totalidad del Curso Bsico Flash 8 tendrs los suficientes argumentos como para comenzar hacer pequeas animaciones en forma semiprofesional, estas animaciones las podrs colocar sin ningn problema el en los diferentes portales que existen en Internet de forma gratuita.

1. Conceptos Bsicos De FlashDescripcin De FlashMacromedia Flash Professional8, le proporciona todas las herramientas necesarias para crear y publicar diseos y animaciones en la web en forma profesional. Con Flash puedes llegara crear desde aplicaciones bsicas de animacin hasta complejas aplicaciones con contenido Web (paginas web). Macromedia Flash Professional8 es un programa esencialmente para hacer animaciones vectoriales, sin embargo, tambin se pueden crear aplicaciones de Flash con una amplia variedad de contenido multimedia que incluye imgenes, sonido, vdeo y efectos especiales. Si solo son incluidas animaciones vectoriales, puedes utilizar las herramientas de Flash como son (lnea, valo, rectngulo polgono, etc.), si son utilizadas este tipo de herramientas vectoriales el peso (kbs) del archivo ser mas ligero a la hora de que este sea publicarlo en la web, sin embargo, si son incluidas animaciones con imgenes las cuales tengan extensin jpg, gif, png, mapa de bits, etc. el peso (kbs) de los archivos resultara ser mas pesado y por lo tanto tardara ms tiempo en ser visualizado en la web. Flash Professional 8 es una poderosa herramienta de con la que podrs disear y desarrollar grandes presentaciones (Animaciones, Juegos, InterfacesdeNavegacin.), Los proyectos de Flash pueden abarcar desde simples animaciones hasta contenido de vdeo.

Creacin De DocumentosPara comenzar a trabajar con Macromedia Flash Professional8, lo primero que debes de tomar en cuenta es la creacin del documento en cual vas a desarrollar la presentacin, los pasos a seguir son los siguientes, primero te mostrare una ruta larga en la cual se describen los tipos de documentos que contiene Macromedia Flash Professional8.

Seccionar Archivo >> Nuevo

Una vez que das enter (clic) en el paso dos, se te presentara una nueva ventana en la cual te pedir que selecciones el tipo de documento flash que quieras utilizar.

Los tipos de documentos son: Documento de Flash, Presentacin de Flash, Aplicacin de formularios Flash, Archivo Action Script, Archivo comunic. Action Script, archivo JavaScript de Flash y Proyecto de Flash.

Cada uno de estos documentos tiene una finalidad especfica. Sin embargo, en esta ocasin solamente nos enfocaremos al Documento de Flash.

Haga clic en Aceptar y aparecer la forma del documento predeterminada por Macromedia Flash Professional8.

El documento predeterminado incluye el nombre del documento (Sin ttulo-1).

El tamao del documento (550 x 400 pxeles).

El color de Fono del documento (blanco #FFFFFF).

Los colores se representa por el smbolo # y luego una secuencia de de seis letras y nmeros alternados Ej. para el color rojo la secuencia es #FF0000.

Una forma ms rpida para crear un documento Flash es simplemente presionar las teclas de ctrl. + N.

Propiedades Del DocumentoEn escasas ocasiones se trabaja con documentos con caractersticas de tamao, color de fondo, velocidad de fotogramas etc. predeterminadas por Macromedia Flash Professional8. As que tendrs que aprender a editar las caractersticas del diseo preestablecido por Macromedia Flash Professional8. Para modificar las caractersticas del documento se siguen los uno de los procedimientos siguientes.

El primero de los procedimientos es Modificar >> Documento.

Este procedimiento tal vez resulte el ms largo, pero nunca esta dems conocer ms de una forma para obtener un fin.

La segunda opcin es simplemente hacer clic en el espacio de Tamao de la barra de Propiedades, si colocas el cursor sobre el espacio sealado en la imagen aparecer la leyenda (Propiedades del documento).

La tercera opcin es la ms fcil porque solamente tienes que presionar ctrl. + J. esta opcin tambin puede resultar la ms complicada de seguir ya que tienes que recordar el comando.

Una vez que utilices una de las opciones antes mencionadas aparecer el cuadro de dialogo Propiedades del documento, en el cual modificaras propiamente el documento. Este cuadro de Propiedades de documento tiene varias opciones.

Este cuadro de Propiedades de documento tiene varias opciones a modificar, la primera de ellas es que puedes incluir un Titulo (nombre) para el archivo swf, con este nombre ser ms fcil de localizar tu archivo por los buscadores web.

Tambin puedes incluir una breve descripcin del archivo, esto har que el archivo contenga ms datos y de esta forma sers ms popular en la web.

En las casillas de Dimensiones de (ancho y alto), podrs modificar el tamao del documento. Por el momento trabajaras con un documento de dimensiones 300 px X 300 px de ancho y alto.

Para cambiar el Color de fondo del archivo, solamente hacer clic en el recuadro del color y de esta forma cambiaras el color. En este caso usar como color de fondo (azul o bien #0000FF).

La velocidad de fotogramas es de suma importancia para animaciones las cuales estn programadas con cdigo ActionScript en las cuales la transicin tiene que avanzar rpido o disminuir la velocidad. Este concepto se describir con ms detalle en captulos siguientes.

Por ultimo podrs modificar la opcin de Unidades de regla, en las cuales se incluyen: Pulgadas, Pulgadas (decimales), Puntos, Centmetros, Milmetros y Pxeles. Las Unidades de regla que se recomiendan usar son los Pxeles.

Al aceptar las propiedades del documento antes descritas se te presentara de forma inmediata la siguiente imagen en la cual se te describen las propiedades del documento.

Estas son Tamao del documento (dimensiones), Fondo (color de fondo), Velocidad de fotogramas (fps), nombre del documento, as tambin se te presenta la barra de herramientas.

Hasta este punto cuantas con la informacin necesaria para crear y modificar las diferentes caractersticas de un documento de Macromedia Flash Professional8, en el siguiente punto de este capitulo veras la descripcin de las herramientas de trabajo ms utilizadas en Macromedia Flash Professional8.

Curso Bsico De Flash 8 (Herramientas De Trabajo) Parte 2

por jmx en Dibujo, Manuales, Tutoriales25 de September de 2008 15:17 pm

5

Descripcin Herramientas De Trabajo.

Las herramientas de Macromedia Flash Professional8 proporcionan una gran variedad de ayuda cuando se trabaja en animaciones con vectores lneas, textos, valos, rectngulos. Flash tambin incorpora herramientas con las cuales puedes editar los vectores dibujados en cuanto a Color de relleno o Color de degradado. Con el fin de hacer ms prctico la utilizacin de las herramientas de flash te menciono como invocar las diferentes herramientas desde el teclado. A continuacin te presento una descripcin de las herramientas ms usadas en flash.

La primera herramienta que se describir es la Herramienta De Seleccin, ya que es la que aparece seleccionada por defaul. Esta herramienta es de gran ayuda por que es la que mueve a los objetos dibujados o imgenes a travs del escenario, te ayuda a editar las formas que selecciones en cuanto a color tamao etc, tambin mueve los objetos de la biblioteca a la escena. Cuando tengas seleccionada otra herramienta por ejemplo la Herramienta De Texto y quieras la Herramienta De Seleccin para que no te desplaces hasta el panel de herramientas vasta con que presiones la letra V en el teclado.

La segunda herramienta que se describir es la Herramienta De Lnea. Como el nombre lo menciona sirve para dibujar lneas rectas las cuales puedes modificar a lneas curvas con la ayuda de la Herramienta De Seleccin. La forma rpida para invocar la Herramienta Lnea es la letra N en el teclado.

Herramienta Texto con ella podrs introducir 3 clases de campos de texto, el ms comn es el campo de Texto exttico con este tipo de texto podrs realizar animaciones en la lnea de tiempo. Los otros dos tipos de campos de textos son el Texto dinmico e Introduccin de texto estos tipos de texto siempre van acompaados de cdigo ActionScript por la complejidad para trabajar con este tipo de texto, solamente se realizaran animaciones con campos de Texto esttico. Forma rpida para invocar la herramienta de texto es la letra T en el teclado.

La Herramienta De valo sirve para dibujar crculos perfecto (1010 pxeles), u valos (1030 pxeles). Para invocar la Herramienta De valo en forma rpida es la letra O en el teclado.

Herramienta De Rectngulo, con ella podrs dibujar cuadrados perfectos (1010 pxeles) o bien rectngulos (1030 pxeles), con la ayuda de una Herramienta Para El Rectngulo te ayudara a dar bordes redondeados, en su momento se explicara a detalle el manejo de esta sub herramienta. Si dejas presionado la herramienta de rectngulo aparecer una herramienta diferente la cual es PolyStar y te ayudara a dibujar formas de Estrellas o formas de Polgonos (pentgonos, hexgonos, etc.). forma rpida de invocar la Herramienta De Rectngulo es presionar la letra R.

Las Herramientas De Bote De Tinta letra S en el teclado y Cubo De Pintura letra K en el teclado, sirven para modificar el color del borde y el color de relleno de la forma dibujada respectivamente. No es muy recomendable usar estas herramientas desde este panel, en lo particular modifico los colores de relleno y borde desde el panel de propiedades en su momento lo explicare a detalle.

Por ultimo te dar una descripcin de la Herramienta De Transformacin De Relleno. Esta herramienta muy til cuando se usan colores degradados ya que modifica la perspectiva del degradado. La forma rpida para invocar esta herramienta es la letra F en el teclado.

Paneles ms utilizadosMacromedia Flash Professional8 dispone de una serie de paneles los cuales hacen que el trabajo para realizar animaciones sea ms fcil y rpido de aprender. Estos paneles estn agrupados en diferentes secciones, los diferentes paneles de los que dispone Macromedia Flash Professional8 los podrs visualizar si haces clic en la Herramienta De Ventana. Los paneles ms utilizados son: Propiedades, Biblioteca, Acciones, Mezclador de colores y Transformacin. En el siguiente punto te dar una descripcin de cada uno de estos paneles as como tambin una forma rpida para invocarlos.

Panel De PropiedadesEn el Panel De Propiedades Se muestran las diferentes opciones que puedes llegar a editarle a una forma vectorial antes de dibujarla. Para invocar el panel de propiedades presionar ctrl. + F3. En el Panel De Propiedades estn incluidos el panel de Filtros y Parmetros. Estos paneles son de mucha ayuda, sin embargo, estas herramientas no sern expuestas en la explicacin.

Por ejemplo; cuando tienes seleccionada la Herramienta De Seleccin (V) en el Panel De Propiedades se te muestra el tamao del escenario (dimensiones de documento), color de fondo y velocidad de fotogramas 12 fps, tambin se te muestra el tipo de versin que estas usado (Reproductor: 8 en este caso y la versin de ActionScript: 2).

Cuando seleccionas la Herramienta Lnea (N) el panel te presenta el nombre de la herramienta, el color de lnea y el tamao de la lnea.

Las propiedades que se presentan para la Herramienta Texto (T) son el tipo de texto (esttico, dinmico e introduccin de texto), color, tamao, tipo de alineacin, etc.

Las propiedades que presentan para la Herramientas valo (O),

Herraminta Rectngulo (R)

y la Herramienta PolyStar

son similares ya que te muestran el color de lnea (trazo), color de relleno, tamao de trazo, tipo de trazo. En particular cada una de estas herramientas tiene una finalidad especfica, en puntos subsecuentes se profundizara con ms detalle cada una de estas herramientas, al hacer un ejercicio para cada una de ellas.

Panel BibliotecaEl Panel Biblioteca es donde se guardan y organizan los smbolos creados en Flash, El Panel De Biblioteca muestra en nombre del Documento, en este caso como aun no se a nombrado con un nombre especifico, flash le coloca el nombre de Sin ttulo-1. tambin te muestra los diferentes tipos de smbolos estos son Clip de pelcula, Botn y Grfico, flash nombra a los diferentes smbolos como Smbolo 1, Smbolo 2, Smbolo 3n, sin embargo resulta ms practico nombrar a cada uno de los smbolos con nombres especifico que describa o que esta colocado en cada uno de ellos. En su momento en el punto incorporacin de smbolos se explicara con ms detalle cual es la propiedad que tienen cada uno de los smbolos. Se pueden colocar tantos smbolos de cada tipo como sean necesarios para la realizacin de una animacin. El Panel De Biblioteca tambin cuenta con la opcin de Bote De Basura (eliminar) es de suma importancia para eliminar smbolos que no nos sean tiles solo basta con seleccionar el smbolo y luego presionar el Bote De Basura. La forma ms rpida para invocar el panel de biblioteca es presionando ctrl. + L F11.

Panel De Acciones

En el Panel De Acciones se presentan las diferentes funciones de cdigo ActionScript con las cuales puedes controlar la lnea de tiempo, se puede agregar cogido ActionScript a smbolos tipo Botn, Clips de pelcula y a Fotogramas. Hay dos formas para obtener las funciones de cdigo la primera es presionar el signo de y de esta forma aparecern las diferentes funciones. La segunda opcin es presionar y luego hacer doble clic en los diferentes libros mostrados, las funciones de cdigo ActionScript son las mismas en cualquiera de los dos casos. El ttulo del panel Acciones cambia a Acciones Botn, Acciones Clip de pelcula o Acciones Fotograma, segn el elemento que est seleccionado. Para mostrar el Panel Acciones presionar F9.

Panel De Mezclador De ColoresEl Panel De Mezclador De Colores es de gran utilidad cuando se trabaja con formas vectoriales (valos o Rectngulos) los cuales tengan por color de relleno o color de trazo (borde) un degradado Lineal o Radial. Este panel adems del los Tipos de Relleno (Ninguno, Slido, Lineal, Radial y Mapa de bits) tambin incluye la opcin del Color Alfa con cual te puedes ayudar para hacer opacos los diferentes colores aplicados. Las opacidades Color Alfa van desde 0 % hasta 100 %. El Panel De Mezclador De Colores esta acompaado por el Panel De Muestras De Colores. Para la invocacin del El Panel De Mezclador De Colores basta con presionar en el teclado shift + F9.

Panel TransformarCuando se tiene que editar una forma vectorial o una Imagen Importada ya sea que la tengas que hacer ms grande o la tengas que girar (rotar) una cierta cantidad de grados, este panel es el conveniente para tal efecto. Ya que el Panel De Transformar te proporciona las opciones de agrandar una forma cualesquiera que esta sea con la opcin de agrandar solamente a lo Ancho o a lo Alto y si seleccionas la Casilla De Restringir la forma a editar mantendr las proporciones tanto a lo ancho y alo alto. Con este panel tambin puedes Rotar una forma o Sesgarla horizontal o verticalmente segn sean las necesidades. Para la invocacin del Panel Transformar presionar la secuencia de teclas ctrl. + T.

En este punto has obtenido los conocimientos suficientes para saber que funcin tienen los diferentes paneles diseo web en Macromedia Flash 8. Si cuentas con alguna duda en los puntos aqu expuestos no dudes en dejar tu comentario y con gustos sern atendidos a la menor brevedad.

Curso Bsico De Flash 8 (Espacio De Trabajo) Parte 3

por jmx en Dibujo, Manuales, Tutoriales1 de October de 2008 21:26 pm

2

Establecer El Espacio De TrabajoCuando se trabaja con Macromedia Flash Professional8 establecer el rea de trabajo es de mucha importancia ya que te permitir tener un panorama ms amplio de tu rea de trabajo, y de esta forma no amontonaras paneles innecesarios en el espacio de trabajo. Si se colocan los diferentes paneles en posiciones estratgicas tendrs una mejor perspectiva de todo el escenario.

Una primera recomendacin para establecer el espacio de trabajo es colocar la Barra de Herramientas en la parte izquierda de la pantalla, el Panel de Acciones en la parte inferior y el Panel de Propiedades por encima del Panel de Acciones.

Los Paneles de Mezclador de Colores, Transformar y el Panel de Biblioteca los puedes colocar en la parte derecha de la pantalla, tal y como se muestra en la imagen. Recuerda que estos son los paneles ms utilizados para la realizacin de animaciones en Macromedia Flash.

Una segunda opcin para agrupar los paneles ms usados es colocarlos en una sola barra, esta accin se realiza: Primero hacer visibles cada uno de los paneles (ctrl. + L = Panel Biblioteca, ctrl. + T = Panel de Transformar, shift + F9 = Panel Mezclador de Colores), luego arrastrando uno a uno arrastrndolos por la parte marcada (como se muestra en # 1 en la imagen), cuando el panel es insertado en otro panel se coloca una franja de color negro como lo marca el paso # 3 de la imagen. La parte marcada con el # 2 de la imagen indica que esta oculto el men de cada uno de los paneles. Y con la pare marcada con el # 4 podrs desplazar los paneles a cualquier parte del documento Flash.

Establecer el espacio de trabajoLas herramientas de seleccin, borrador y cambio de color tambin son de mucha importancia cuando se esta trabajando con presentaciones Flash, ya que como el nombre de cada herramienta lo indica, la Herramienta de Seleccin sirve para; seleccionar smbolos, colores, fotogramas en la lnea de tiempo, propiedades del documento, etc. y la Herramienta de Borrador perite borrar partes del relleno de alguna forma dibujada, quitar bordes.

En esta seccin incluir como dar color de relleno y color al borde sin la necesidad de que tengas que trabajar con el panel de mezclador de colores shift + F9. Las herramientas con las que se trabajaran en este punto son las Herramientas de Seleccin, Bote de Tinta, Cubo de Pintura, Borrador, Borrador Grifo, las herramientas 3 y 4 estn incorporadas a las herramientas 5 y 6 respectivamente.

Herramienta de Seleccin (V)La primera herramienta a definir es la herramienta de seleccin la cual aparece seleccionada de forma automtica cada vez que se inicia (abre) el programa de Flash, para invocarla de forma rpida es presionando la tecla (V) en el teclado.

Esta herramienta te ayudara a editar (dibujos) formas vectoriales como son: rectngulos, valos, lneas, o sea podrs seleccionar parte o formas completas de algn dibujo para luego modificarlas.

La imagen muestra 3 diferentes cuadros, el cuadro 1 muestra que no posee ninguna seleccin.

El cuadrado 2 esta seleccionada parcialmente.

El cuadrado 3 esta seleccionado completamente.

El cuadrado 4 esta modificado por uno de sus extremos mientras que el cuadrado 6 esta modificado tanto en la parte superior como inferior. Esto se logra tomando por uno de los extremos la parte que se quiera modificar.

En el cuadrado 5 se presenta una forma de dos colores tanto en el borde como en el relleno, aqu solamente se selecciono parte del dibujo y luego se modifico tanto el color de borde como el de relleno.

Curso Bsico De Flash 8 (Herramienta De Borrador) Parte 4

por jmx en Dibujo, Manuales, Tutoriales7 de October de 2008 21:05 pm

0

Herramienta de Borrador (E) Tipo de borrador & Opciones de borrador.

La Herramienta de Borrador posee dos opciones de borrar, la primera opcin es seleccionar el (tamao y forma de borrador), y la segunda opcin es seleccionar que es lo que se quiere eliminar de una forma vectorial dibujada. Una forma rpida para invocar la herramienta de borrador es presionar en el teclado la letra E.

Cuando se selecciona la herramienta borrador te da la opcin de que escojas el tamao y forma del borrador, segn sean las necesidades de borrado. Puedes elegir entere 5 diferentes tamaos de valos, la segunda opcin que tienes para elegir el tamao y forma, son entre 5 diferentes tamaos de cuadrado.

Las opciones ms comunes para eliminar (borrar) formas vectoriales son: borrado normar, borrar rellenos, borrar lneas. Cada una de estas opciones son especficas para cada necesidad que se tenga.

En la siguiente imagen se muestran los tres diferentes tipos de borrado. Los cuadros marcados con el # 1 estn borrados con la opcin de barrar normal, este tipo de opcin permite borrar tanto color de relleno como el color de borde sin hacer distinciones entre estos.

Los cuadros marcados con el # 2 estn borrados con la opcin de borrar rellenos, este tipo de borrador no elimina nada de contorno (borde) por ms que pases el borrador por encima del contorno.

Las formas vectoriales marcadas con el # 3 estn borradas con el borrador de lneas, con esta opcin no borraras nada de relleno, y solo podrs borrar los contornos (bordes) de las formas vectoriales dibujadas. La opcin de borrar rellenos es lo contrario a borrar lneas.

Herramienta de borrador Grifo.

Adems de las opciones de tamao, forma y tipos de borrado de las cuales te puedes ayudar para eliminar formas dibujadas. Flash incluye una herramienta (Grifo) con la cual se eliminan de un solo clic los bordes o rellenos seleccionados, para hacer visible la herramienta de (Grifo), primero seleccionar la herramienta de borrador y luego el Icono De Grifo tal y como se muestra en la imagen.

Para eliminar bordes o rellenos solamente tendrs que situarte en la posicin a borrar y luego simplemente hacer clic. Esta herramienta es de lo ms fcil de manejar como lo podrs constatar.

En las imgenes marcadas como 1,1 el icono de borrador se situ sobre el borde del cuadrado y luego se elimino.

En la imagen marcada con 1,2 lo que se elimino de la forma vectorial fue el relleno.

La imagen marcada con 1,3 se elimino en la parte superior el color de relleno y en la parte inferior se elimino el color de borde.

En este punto has obtenido los conocimientos para poder editar una forma vectorial en cuanto al borrado de trazo y relleno. En captulos posteriores te mostrare como cambiar el color de trazo y de relleno de diferentes formas geomtricas.

Curso Bsico De Flash 8 (Herramientas Edicin de Color) Parte 5

por jmx en Dibujo, Manuales, Tutoriales16 de October de 2008 20:30 pm

1

Herramientas edicin de colorLa herramienta de Botote de tinta tiene por finalidad cambiar de color de trazo (color de borde). La herramienta de bote de tinta se puede seleccionar difracta mente en la barra de herramientas o presionando la letra S en el teclado.

Una vez realzada la invocacin de la herramienta, aparecer en el panel de Propiedades una serie de completos tales como; Color, Altura y Estilo de trazo. Por el momento solamente te enfocaras en el Color de trazo.

Cuado se selecciona la herramienta de Color de trazo aprese sobre el documento un jarro de pintura.

Para cambiar de Color de trazo basta con presionar el recuadro que corresponde a el Color de trazo, tal y como se marca en la figura.

Puedes seleccionar el Color de trazo de dos formas, la primera es desde la barra de Herramientas opcin Colores y luego hacer clic en el recuadro que corresponde a color de trazo en la imagen esta marcado con el # 1.

La segunda opcin para cambiar el Color de trazo es desde del panel de Propiedades. Es ms recomendable trabajar desde esta opcin ya que tambin puedes manipular las opciones de altura y estilo de trazo.

Cuando se tiene seleccionado el color que ser aplicado al borde tendrs que colocar el jarro de pintura sobre la figura dibujada como se muestra en el cuadro marcado con la letra (a)

En el caso de de la figura marcada con la letra (b), colocar el jarro de pintura pero sobre el borde esto es porque la figura esa dividida en dos partes y cada una de ellas reconoce a un diferente color.

Altura y tipo del trazo.

Como ya se tiene definido como cambiar el color al trazo (borde), solamente falta por aclarar como es que se cambian la altura y estilo de trazo. La altura del trazo (grosor de borde) se define por nmeros a un mayor nmero ms grueso aparecer el borde y a un menor nmero se tendr un borde mas delgado. Recuerda que para activar estas propiedades tienes que invocar la herramienta de Bote de tinta S.

La altura de trazo aparece de forma automtica marcada con el nmero 1, para cambiar la altura hay dos formas, la primera es hacer clic sobre la posicin marcada con el # 1 y luego deslizar la barra hasta un nmero apropiado, la segunda forma es talvez la ms recomendable, esto es hacerlo de forma manual, colocar el cursor sobre la casilla de la altura de trazo y escribir el nmero apropiado. Flash acepta como altura mnima 0.1 y como altura mxima 200.

En cuanto a los estilos de trazo flash esta un poco limitado ya que solamente cuenta con 6 diferentes estilos, sin embargo con estos basta para lograr diseos vectoriales buenos. Los estilos de trazo se hacen visibles cuando se hace clic sobre la marca que indica el # 2 en la imagen.

Y para aplicar los cambios a las formas vectoriales, seleccionar el color de trazo #000000, la altura de trazo y el estilo de trazo.

Herramienta Cubo De Pintura (K) Color De Relleno.

El uso de la herramienta de Cubo de pintura (color de relleno), es mucho ms simple de usar que la herramienta de (Bote de pintura), para la invocacin de la herramienta Cubo de pintura basta con presionar la letra k en el teclado.

Cuando es seleccionada esta herramienta aprese sobre el documento una tina de pintura.

En el Panel de Propiedades se encuentra el nombre de la herramienta y un cubo de pintura el cual contiene la gama de colores que se pueden usar como relleno.

Para color el color de relleno solamente basta con seleccionar el color ya sea desde la posicin marcada con el nmero 1 o desde la posicin marcada con el nmero 2 las dos indican color de relleno.

Cuando se tiene seleccionado el color de relleno colocar la tina de pintura sobre la forma vectorial y hacer clic sobre ella, este procedimiento se realizo en las figuras marcadas con la letra (a), en la figura marcada con la letra (b) primero se cambio de color a una de las parte y luego a la otra.

Con la practica dominaras el uso de las diferentes herramientas de Macromedia Flash Professional8.

Curso Bsico De Flash 8 (Herramientas Comunes) Parte 6

por jmx en Dibujo, Manuales, Tutoriales22 de October de 2008 20:15 pm

0

Trabajar con herramientas ms comunes.

Antes de comenzar con conceptos de animacin, fotogramas, smbolos, etc. es necesario primero aprender a dibujar simples formas vectoriales (lneas, valos, rectngulos, etc.), porque de ello depende en gran parte la animacin. En este punto aprenders a usar las herramientas de lnea, valo, rectngulo, polgono y texto.

Herramienta de Lnea (N).

La primera de las herramientas que ser descrita es la Herramienta De Lnea, con ella te podrs ayudar para hacer lnea rectas o curvas segn sean las necesidades del proyecto (diseo web, animacin, botn etc.). Para comenzar a trabajar con la herramienta de Lnea basta con seleccionarla en el panel de herramientas, o bien invocndola presionando la latera N en el teclado.

Cuando esta selecciona la Herramienta De Lnea, aparece en la barra de propiedades el nombre de la herramienta as como el icono que la representa, tambin apresen las opciones de color altura y tipo de trazo, las cuales ya fueron tomadas en cuenta en el capitulo anterior.

Una vez que es seleccionada la Herramienta De Lnea aparece sobre el rea de trabajo (documento) una cruz como tal y como se muestra en la figura marcada con la letra (a).

La figura marcada con la letra (b) te indica que la lnea esta siendo trazada con cierto grado de inclinacin (lnea diagonal).

La figura marcada con la letra (c) indica que la lnea esta siendo trazada ya sea en forma horizontal o vertical, en este caso la lnea siempre aparecer de forma recta.

Con la herramienta de Lnea se pueden hacer trazos diagonales tal y como se muestra en la figura marcada con la letra (a).

Si se mantiene presionada la tecla de shift en el teclado, las lneas que hars son rectas. Estas pueden ser horizontales o verticales, la figura de la letra (b) muestra este tipo de lnea (horizontal).

Un buen truco para hacer lneas con un grado inclinacin de 45 es mantener presionada la tecla shift en el teclado y luego mover el cursor hacia arriba o abajo cuando se este dibujando la lnea. La figura marcada con la letra (c) representa una lnea a 45.

Para hacer que una lnea incremente de tamao hay dos mtodos, este es el primero y el ms fcil de aplicar. Colocar el cursor sobre uno de los extremos de la lnea, en la parte inferior del cursor aparecer la mitad de un cuadrado (esto indica que es una lnea recta). Despus solamente arrastrar el cursor en la direccin deseada y de esta forma crecer la lnea. Las figuras marcadas con las letras (a y a) son un ejemplo de lo antes descrito.

Cuando se quiere obtener una lnea curva a partir de una lnea recta, basta con colocar el cursor sobre un punto de en medio (nunca en los extremos), aparecer en la parte inferir del cursor una pequea lnea curva. Despus solamente arrastrar el cursor hacia abajo o arriba. La figura de la letra (b) indica una lnea recta y la figura (b) indica que se transformo a una lnea curva.

El segundo mtodo para hacer que incremente de tamao una lnea es, primero seleccionar la lnea y en el Panel de Propiedades aparecern las casillas que representan lo ancho y alto (An.: y Al.:) as como tambin las casillas que representan las coordenadas X: y Y: en las que se encuentra situada la lnea (forma).

Cambiar las dimensiones en la casilla a lo ancho (An.:), en este caso se incremento el tamao de la lnea a 150.0 pxeles. Las coordenadas no fueron modificadas.

Herramienta de valo (O).

La segunda herramienta a describir es igual de importante que la herramienta de (Lnea). Cuando se hacen diseos Web o animaciones con formas vectoriales, a menudo se recurre a esta herramienta (valo). Una de las ventajas de trabajar con la herramienta de valo es que se pueden dibujar tanto formas (ovaladas) como formas totalmente (circulares). Para trabajar con la herramienta de valo basta con presionar en la barra de herramientas la forma (icono) que representa al Circulo o presionar en el teclado la letra O.

Una vez que es seleccionada la herramienta de valo aparecer en el Panel de Propiedades en nombre de la herramienta que esta siendo seleccionada, as como tambin los diferentes parmetros de que esta como puesto el valo: color de trazo (borde), color de relleno, altura de trazo y estilo de trazo.

Cuando se hayan seleccionado las propiedades del valo en cuanto a color de borde, color de relleno y altura de trazo, trasladar el cursor a la Escena cuando este sobre el escenario un signo de (+) estars listo para comenzar a trazar el valo o Crculo segn sean las necesidades.

Los valos y crculos se pueden deformar en otras formas. Este punto se vera con mayor profundidad en otro captulo (edicin de formas vectoriales para la animacin).

Cuando se dibuja con la herramienta de valo se pueden visualizar dos diferentes formas de crculos pequeos en la parte inferior derecha.

En la primera forma marcada con el nmero 1 aparece un circulo pequeo en la parte inferior derecha, esto indica que se esta dibujando un valo.

En la forma marcada con el nmero 2 aparece un crculo de mayor tamao, lo cual te indica que se esta dibujando un crculo perfecto.

Cuando se trabajes con la herramienta de valo es muy recomendable primero seleccionar: el color de trazo (borde), color de relleno y altura de trazo. Si seleccionas primero estos parmetros te ahorraras mucho tiempo en la realizacin de tus trabajos.

En la figura nmero 1 esta representado un valo el cual cuenta con un color de relleno #00FF00, color de trazo #FF0000 y altura de trazo 3.

Practica como ejercicio la figura marcada con el nmero 3 para que se visualice un crculo perfecto con color de trazo (borde) #000000, color de relleno #FFFF00 y altura de trazo 1.

En el prximo captulo se te mostrara cuales son las propiedades le las herramientas Rectngulo y PolyStar.

Curso Bsico De Flash 8 (Herramientas Rectngulo & PolyStar) Parte 7

por jmx en Dibujo, Manuales, Tutoriales30 de October de 2008 13:10 pm

0

Herramienta de Rectngulo (R).

La herramienta de Rectngulo al igual que las herramientas de Lnea y valo, es de mucha utilidad en los trabajos de Flash, ya que gracias a ella puedes hacer figuras vectoriales de rectngulos o cuadros. Para comenzar a trabajar con esta herramienta solamente presionar en la barra de herramientas el icono que representa al Rectngulo, o en el teclado presionar la letra R.

Cuando es invocada la herramienta de Rectngulo aparece sobre el Panel de Propiedades el nombre de la herramienta as como tambin el icono que la representa.

Los parmetros de edicin son los mismos que en el caso de la herramienta de valo: color de trazo, color de relleno y altura de trazo.

Las formas vectoriales dibujadas con la herramienta de rectngulo pueden deformarse en otras (metamorfosis), este punto ser tocado en otro capitulo (edicin de formas vectoriales para la animacin).

Como se menciono anteriormente, se pueden dibujar tanto formas vectoriales de rectngulos como de cuadrados.

Cuando es el caso que se dibujan rectngulos aparece un crculo pequeo en el extremo inferir derecho, tal y como se muestra en la figura marcada con el # 1.

Por el contrario cuando se dibuja un cuadrado, aparece sobre el extremo inferior derecho un crculo te tamao ms grande, la figura # 2 representa a un cuadrado.

En la figura marcada con el # 1 se dibujo un rectngulo de propiedades: color de trazo #FF0000, color de relleno #00FF00 y de altura de trazo 3. Nota: Antes de comenzar a trazar las diferentes formas vectoriales, nuevamente se te recomienda que primero selecciones los distintos parmetros.

La figura marcada con el # 3 representa un cuadrado al cual se le modificaron las propiedades: color de trazo #000000, color de relleno #FFFF00 y altura de trazo 1. Practica esto como un ejercicio y veras que es muy sencillo de realizar.

Herramienta de PolyStar (Polgono).

La herramienta que a continuacin se describe esta contenida dentro de la herramienta de Rectngulo, una vez que selecciones la herramienta de PolyStar puedes hacer dos variantes una para dibujar Polgonos y la segunda para dibujar Estrellas.

Primero tienes que tienes que mantener presionado el icono de la herramienta del Rectngulo, hasta que aparezca el men emergente el cual indica que esta presente la herramienta PolyStar.

Seleccionar la segunda herramienta (PolyStar) y de esta forma cambiara en el panel de herramientas el icono de rectngulo por un icono de hexgono.

Nota: no puede ser posible la invocacin de la herramienta PolyStar desde el teclado, as que tienes que seguir el mtodo descrito.

Como ya fue mencionado puedes dibujar tanto Polgonos como Estrellas. Una vez que fue seleccionada la herramienta de PolyStar en el Panel de Propiedades seleccionar la casilla de Opciones

De esta forma aparecer un segundo panel (Configuracin de herramientas).

Hacer clic sobre el espacio que despliega el Estilo. Aqu es en donde estn contenidos los Estilos de Polgono y de Estrella

Hacer un primer ejercicio con la herramienta Polgono. Seleccionar la herramienta de PolyStar, hacer clic en la casilla de Opciones

Seleccionar el Estilo de Polgono y en el Nmero de lados escribir 5.

Es esta forma la herramienta esta configurada para dibujar un Polgono de 5 lados (pentgono). El pentgono posee color de trazo #000000, color de relleno #00FF00 y altura de trazo 1 Nota: Para con figurar los parmetros de color de relleno, color de trazo y altura de trazo, se manejan igual que en el caso del valo y Rectngulo.

Practica la figura mancada con ** la cual es una forma vectorial de 6 lados color de relleno #FFFF00, color de trazo #FF0000 y altura de trazo 3.

En el segundo ejercicio, proceder a trabajar con la herramienta de Estrella, en el panel de Propiedades hacer clic sobre la casilla de Opciones

Luego en el panel de Configuracin de herramienta seleccionar en Estilo Estrella y Nmero de lados 5.

En la figura marcada con el #1 esta representada la Estrella de 5 lados Color de trazo #000000, Color de relleno #00FF00 y Altura de trazo 1.

Practicar la figura #2 que representa una estrella de 10 lasos, Color de relleno #00FFFF, Color de trazo #FF00FF y Altura de trazo 3.

Curso Bsico De Flash 8 (Herramientas Texto & Transformacin de Relleno) Parte 8

por jmx en Dibujo, Manuales, Tutoriales7 de November de 2008 15:57 pm

1

Herramienta de Texto (T).

La herramienta de texto es de mucha ayuda, ya que con ella se pueden hacer diferentes animaciones de texto. Puedes trabajar con animaciones de texto en scroll, tambin puedes introducir textos ya sea para un formulario de contacto o para contraseas. Los trabajos que puedes llegar hacer con la herramienta de texto son muchos y muy variados. Sin embargo, la explicacin que se te dars a continuacin es bsica y por lo tanto no abarca todos los elementos antes mencionados.

Cuando es seleccionada la herramienta de texto, en el panel de Propiedades aparecen los diferentes parmetros de texto con los que te puedes ayudar para dar formato al texto.

Las herramientas bsicas para dar formato al texto son: Tipo de fuente, Tamao de fuente, Color de fuente, Texto en negrita y/o cursiva, Tipo de alineacin (izquierda, centrado, derecha y justificado), junto con estas herramientas de formato flash tambin cuenta con una opcin que la de Espacio entre letras, esta ltima opcin es de mucha utilidad ya que hay veces que el texto queda muy amontonado y con esta opcin podrs separar el espacio entre letras o reducir el espacio entre letras segn sea tu caso.

A continuacin se te presentan dos textos, el primero de los textos es hasta cierto punto normal si es comparado con el segundo texto en el cual se altero uno de los parmetros (Tamao de fuente, Texto en negrita y Espacio entre letras).

El primer texto tiene como propiedades: Tipo de fuente (Arial), Tamao de fuente (40), Color de fuente (#FFFFFF) y Espacio entre letras (0).

Practicar la el texto 2, y de esta forma te podrs familiarizar con mayor rapidez con los distintos parmetros de formato de la Herramienta texto.

El texto 2 cuenta con modificaciones en el: Tamao de fuente (50), Texto en (negrita) y Espacio entre letras (10).

Herramienta de Transformacin de Relleno (F)La herramienta de Transformacin de relleno es especialmente utilizada cuando se quiere modificar el color de relleno de un objeto que posea un color de degradado. El color de degradado se puede modificar en cuanto a: tamao del degradado, direccin del degradado o con respecto al centro focal y punto central. La aplicacin de los colores de relleno en forma de degradado son muy fciles de establecer en las diferentes formas vectoriales (valos O, rectngulos R. Cuando se quiere establecer como color de relleno un degradado lo primero que tienes que hacer es invocar el panel de Mezclador de colores (Ventana >> Mezclador de colores o shift + F9 en el teclado). La opcin de Tipo, tiene dos opciones de Estilo de relleno para la creacin de un degradado. Las opciones para el degradado son Lineal y Radial. Primero se trabajara con la opcin de Estilo relleno Lineal. Luego simplemente dibujar una forma vectorial (valo rectngulo), y de esta forma quedara establecido un color degradado. Si quieres modificar los colores del degradado simplemente, hacer doble clic en cada uno de los cuados los cuales estn marcados con el nmero 4, y mover estos cuadros a voluntad para modificar las distancias del degradado. Una vez que esta establecido el color de degradado, presionar en el Panel de Herramientas la opcin de Transformacin de relleno (F), y luego seleccionar el objeto dibujado. Cuando se ha seleccionado el objeto en cuestin, podrs proceder a modificar el color de relleno en tres diferentes opciones tal y como se muestra en el objeto dibujado. *Rotacin, con esta opcin podrs hacer girar el color de relleno en cualquier direccin. **Tamao de ancho, esta opcin permite hacer que crezca o disminuya el tamao del degradado. ***Punto centrar, este punto te permitir cambiar de posicin el punto del centro del color de relleno.

Practicar la siguiente figura vectorial: cuadro R. Tipo (Estilo de relleno Lineal). Los colores del degradado son #00FF00 y #FFFF33. Modificar las propiedades de Transformacin de relleno: *Rotacin, **Tamao de ancho y ***Punto centrar.

Para trabajar con la opcin de degradado Tipo (Estilo de relleno Radial). Los pasos a seguir son bsicamente los mismos que en el caso del Estilo de relleno Lineal.

Cuando es seleccionada la herramienta de Transformacin de relleno (F), para modificar el relleno degradado el objeto los parmetros a modificar cambian en relacin al caso del tipo Lineal.

Los parmetros a modificar en el caso del Tipo Radial son:

a Punto focal, modifica la iluminacin focal en reilacin al punto del centro.

b Punto centrar, este punto te permitir cambiar de posicin el punto del centro del color de relleno.

c Tamao de ancho, esta opcin permite hacer que crezca o disminuya el tamao del degradado en cuanto a lo ancho.

d Tamao, seleccionar esta opcin para hacer crecer o disminuir el tamao del degradado en forma proporcional en reilacin al centro.

e Rotacin, con esta opcin podrs hacer girar el color de relleno en cualquier direccin.

Practicar la siguiente forma vectorial (valo) en la cual esta involucrado un color de relleno Tipo Radial.

Los colores del degradado son #FFFFFF y #00FFFF.

Modificar los parmetros de a Punto focal, b Punto centrar, c Tamao de ancho, d Tamao y e Rotacin.

Hasta este punto tienes los conceptos bsicos para intentar hacer una animacin, sin embargo, si no tienes la suficiente experiencia en el manejo de Programa Flash tendrs algunas complicaciones para establecer bien una buena animacin. Por esta razn se te guiara para que conozcas conceptos bsicos de la lnea de tiempo, insertar fotogramas, fotogramas clave, hacer animaciones con interpolacin de movimiento etc. una vez que tengas entendidos estos conceptos podrs hacer animaciones de una forma prctica y en forma profesional.

Curso Bsico De Flash 8 (Conceptos Bsicos Lnea De Tiempo & Fotogramas) Parte 9

por jmx en Dibujo, Manuales, Tutoriales15 de November de 2008 00:02 am

4

Conceptos Bsicos de la Lnea de Tiempo.

En el Programa Macromedia Flash 8 el manejo de la Lnea de tiempo es esencial que la conozcas, ya que de ello depende en gran parte que una animacin tenga un buen fin, en esta Lnea de tiempo estn dispuestos las diferentes formas vectoriales, animaciones, imgenes (jpeg, gif, png), etc. La Lnea de tiempo esta constituida por: capas, fotogramas, fotogramas vacos, fotogramas clave, fotogramas clave vacos, velocidad de fotogramas, y tiempo transcurrido (tiempo que dura la animacin). Recordar que Macromedia Flash 8 es como una obra de teatro en donde todo se tiene que representar en La Escena, y haciendo esta comparacin las animaciones que se dispongan en los smbolos de clips de pelcula, botones y grficos en algn momento se tienen que arrastrar hacia la Escena para que puedan ser visualizados en el archivo SWF.

a Lnea de tiempo, b numero de capas insertadas, c insertar capas, d ocultar todas las capas o mostrar todas las capas, e bloquear todas las capas o desbloquear todas las capas, f fotogramas claves vacos, g fotogramas vacos, h fotogramas, i fotogramas clave, j cabeza lectora de fotogramas, k muestra el nmero de fotograma en donde se encuentra la cabeza lectora, l velocidad de fotogramas por segundo (fps), m muestra el tiempo que ha transcurrido segn en donde se encuentre la cabeza lectora, en este ejemplo a transcurrido 1.3 segundos hasta el fotograma 20, a una velocidad de 15 fps. n representa que ah se puede insertar cualquier tipo de fotograma.

Diferencias Entere Fotograma y Fotograma Clave.

Cuando se hace una animacin de cualquier tipo, siempre se empieza a partir de un fotograma clave vaco el cual se convierte en un fotograma clave cuando en el se inserta alguna forma vectorial o imagen.

Los fotogramas son de inters en la Lnea de tiempo por que con ello se prolonga la animacin, esto es a mayor nmero de fotogramas la animacin ser ms lenta, y por el contrario a menor nmero de fotogramas en la lnea de tiempo la animacin ser ms rpida.

En la siguiente imagen estn representados 14 fotogramas, ya que el primer fotograma es un fotograma clave.

Solamente los fotogramas clave pueden ser modificados y una vez editados las diferentes formas vectoriales, imgenes, etc. de cada uno de los fotogramas clave, estos quedaran listos para poder establecida una animacin.

Los fotogramas clave estn insertados en la Lnea de tiempo en la posicin nmero 1 y nmero 15.

La forma b (valo) esta dibujada sobre el fotograma clave # 1.

La forma c esta dibujada sobre el fotograma clave #15.

Insertar Fotogramas, Fotogramas Vacos, Fotogramas Clave, Fotogramas Clave Vacos y Borrar Fotogramas de Cualquier Tipo.En esta seccin se te mostrara como insertar los diferentes tipos de fotogramas con el fin de que logres colocar estos fotogramas en los frames adecuados y as las animaciones queden estupendas en cuanto a dinamismo. Hay dos formas de insertar los diferentes tipos de fotogramas, una es asiendo uso del teclado y la segunda mediante los mens emergentes despus de hacer clic con el ratn.

Primero se trabajara con la insercin de fotogramas mediante el mtodo de los mens emergentes, para insertar fotogramas, fotogramas vacos, fotogramas clave y fotogramas clave vacos, Solamente basta con seleccionar el fotograma en donde se quiere insertar cualquier tipo de fotograma. Luego hacer clic con el botn derecho del ratn, y en el men emergente seleccionar el tipo de fotograma a colocar en la Lnea de tiempo.

Si por alguna razn insertaste fotogramas de ms, no preocuparte la solucin a este tipo de problemas es usar la opcin de quitar fotogramas. Seleccionar en la Lnea de tiempo los fotogramas a eliminar, hacer clic con el botn derecho del ratn y seleccionar en el men emergente la opcin de Quitar fotogramas. Esta opcin elimina cualquier tipo de fotogramas.

Sin embargo, es recomendable que te aprendas las diferentes abreviaciones en el teclado para cada una de los fotogramas. F6 insertar fotograma clave, F7 insertar fotograma clave vaco, F5 insertar fotograma y fotograma vaco, para borrar cualquier tipo de fotograma presionar shift + F5.

Curso Bsico De Flash 8 (Interpolacin De Movimiento) Parte 10

por jmx en Animacin, Dibujo, Manuales, Tutoriales15 de November de 2008 01:30 am

5

Interpolacin de Movimiento con Formas Vectoriales.

Ahora es el tiempo de comenzar a practicar una pequea animacin mediante el mtodo de Interpolacin de movimiento, y de esta forma comenzaras a poner en practica los conocimientos adquiridos hasta este punto. En el mtodo para hacer interpolaciones de movimiento, solo basta con dibujar cualquier tipo de forma vectorial.

Hay tres tipos de animaciones que se pueden crear con este mtodo de Interpolacin de movimiento: la primera es cambiar el color gradualmente de una forma vectorial, la segunda es mover una forma vectorial a travs del Escenario y la tercera es una combinacin de las dos anteriores en donde se cambia de color gradualmente y al mismo tiempo la forma vectorial se va moviendo a travs del Escenario.

A continuacin te mostrare como hacer una animacin en la cual cambie de color gradualmente una forma vectorial.

Crear un documento de Propiedades ctrl. + J dimensionases de la pelcula 300 * 300 pxeles de ancho y alto, usar como Color de fondo #FF9900 y velocidad de fotogramas 15 fps.

El total de la animacin se trabajara en la Escena. En el primer fotograma dibujar un valo O, sin borde y color de relleno #000000, las dimensiones del valo son 200.0 * 200.0 pxeles de ancho y alto, colocar la forma vectorial en coordenadas X: 50.0 y Y: 50.0.

Luego insertar un fotograma clave F6 en otro frame, por ejemplo, en el frame nmero 30.

Hacer clic con el botn derecho del ratn sobre la lnea de tiempo en un punto entre el fotograma nmero 1 y el fotograma nmero 29, En el men emergente seleccionar la opcin de Crear interpolacin de movimiento.

Seleccionar la forma dibujada del fotograma nmero 30 y en el Panel de Propiedades en la opcin Color seleccionar Tinta y seleccionar otro color #00FFFF. Presionar ctrl. + Enter para ver la animacin creada.

Espero que este ejemplo de cmo hacer que una forma vectorial cambie de color quede lo suficientemente bien explicada, en caso de que no ayas entendido alguno de estos pasos simple mente ponte en contacto y daremos la mejor solucin a tu inquietud.

Curso Bsico De Flash 8 (Movimiento De Formas Vectoriales) Parte 11

por jmx en Animacin, Dibujo, Tutoriales22 de November de 2008 12:49 pm

2

Animacin De Movimiento De Formas VectorialesPara el caso en la que se quiere que la forma vectorial se traslade de un lugar a otro por el Escenario, te tengo el siguiente ejemplo.

Crear un documento de Propiedades ctrl. + J dimensionases de la pelcula 500 * 150 pxeles de ancho y alto, usar como Color de fondo #0099CC y velocidad de fotogramas 15 fps.

Fotograma = Frame

Primero dibujar el valo O en el Fotograma nmero 1, de Propiedades Color de borde #000000 y Color de relleno #FFFFFF, las dimensiones son 100.0 * 100.0 pxeles de ancho y alto. Colocar la forma vectorial dibujada en Coordenadas X: 100.0 y Y: 25.0.

Despus insertar un Fotograma clave F6 en el frame nmero 30.

Seleccionar la forma vectorial del Fotograma nmero 30 y moverla a Coordenadas X: 00.0 y Y: 00.0.

Despus simplemente seleccionar en la lnea de tiempo un Fotograma entre el nmero 1 y el Fotograma nmero 29 y hacer clic con el botn derecho del ratn, en el men emergente seleccionar la opcin de Crear interpolacin de movimiento. Presionar ctrl. + Enter y ver es como se mueve el valo.

Hacer una tercera variante de interpolacin de movimiento en donde forma vectorial cambia gradualmente de color y al mismo tiempo se mueve. Aqu partiremos de la animacin anterior. Seleccionar la forma vectorial del fotograma 30, en el panel de Propiedades seleccionar la opcin de Color Tinta y cambiar el color #FFFF00. presionar ctrl. + Enter y ver el cambio que a sufrido la animacin.

Curso Bsico De Flash 8 (Edicn de Formas Vectoriales) Parte 12

por jmx en Animacin, Dibujo, Tutoriales22 de November de 2008 13:15 pm

0

Edicin de Formas Vectoriales para la Animacin.Con frecuencia es necesario modificar las formas vectoriales y as obtener animaciones diferentes que salgan de los clsicos valos y rectngulo, y de esta forma imprimirle a cada una de las animaciones un toque muy personal.

A continuacin te mostrare como hacer una estrella como las que usan los Nijas a partir de dibujar una Estrella de 5 picos. Trabajar en un documento de Propiedades ctrl. + J, dimensiones de la pelcula 200 * 200 pxeles de ancho y alto, Color de fondo #FFFFFF y velocidad de fotogramas 12 fps.

Primero dibujar la Estrella de 5 picos con la herramienta PolyStar este ejercicio ya fue practicado. Las propiedades de la estrella son: Color de borde #000000, Color de relleno #006633, dimensiones 185.0 * 175.0 pxeles colocar la estrella en coordenadas X: 7.5 y Y: 12.5.

Luego tomar uno a uno cada extremo de los lados de la estrella (cuando se toma alguno de los extremos el cursor aparecer con una pequea lnea inclinada, cuando se toma algn extremo de que forme un ngulo en el cursor aparecer una lnea que forma una ngulo de 90 grados), inclinar estos lados un poco hasta obtener la forma ms apropiada.

Cuando tengas bien definidas las curvas de la estrella, puedes hacer una animacin de cambio de color. Insertar un fotograma clave F6 en el fotograma nmero 20.

Seleccionar un fotograma entre el nmero 1 el fotograma nmero 19, hacer clic con el botn derecho del ratn y en el men emergente optar por la opcin de Crear interpolacin de movimiento.

En el Panel de Propiedades queda establecida automticamente la animacin de movimiento, ahora hacer que la estrella cambie de color. Seleccionar la estrella del fotograma nmero 1 y en la opcin de Color: Tinta cambiar el color a #FFFF00. Presionar ctrl. + Enter y de esta forma queda establecida una nueva animacin.

Dibujar una cabeza caricaturesca. Este ejercicio te servir de mucho ya que involucra varios elementos tales como invocar las herramientas por medio del teclado, rellenar con colores slidos, dibujar crculos y lneas etc. Trabajar este ejercicio en un documento de Propiedades ctrl. + J. dimensiones 300 * 300 pxeles, Color de fondo #FFFFFF y velocidad de fotogramas 12 fps.

Curso Bsico De Flash 8 (Edicn De Movimiento) Parte 13

por jmx en Animacin, Dibujo, Manuales, Tutoriales27 de November de 2008 12:43 pm

1

Edicin De Los Parmetros De MovimientoLas formas vectoriales que involucran movimiento pueden animarse de diferente forma despus de haberse creado la Interpolacin de movimiento: la primera animacin que se puede hacer, es que la forma vectorial gire en sentido de las agujas del reloj (Horario) y la segunda opcin es que la forma vectorial gire en sentido opuesto a las agujas del reloj (Antihorario).

En el siguiente ejemplo se trabajara sobre una Interpolacin de movimiento de un valo y hacer que esta forma vectorial gire en sentido de las agujas del reloj.

Crear un documento de propiedades ctrl. J, dimensiones 250 * 250 pxeles, color de fondo #FFFFFF y velocidad de fotogramas 12 fps.

Lo primero que tienes que hacer, es dibujar alguna forma por ejemplo un valo (O). y crear una Interpolacin de movimiento desde el fotograma nmero 1 hasta el fotograma nmero 20, as quedara insertada una animacin de movimiento.

En al capitulo anterior esta destallada la tcnica para insertar una Interpolacin de movimiento.

Luego de que se haya creado la animacin seleccionar algn fotograma entre el 1 y el 19.

En el panel de Propiedades seleccionar la opcin de Girar:Horario. Tambin puedes manipular el nmero de giros en la casilla de veces (Nmero de rotaciones) que de la forma vectorial a lo largo de la animacin, el nmero de vueltas va desde 1 giro hasta 65535 giros.

Practicar la animacin de Interpolacin de movimiento, en la que se involucra que la rotacin sea en sentido Antihorario, con un Nmero de rotaciones de 3 y una lnea de tiempo de 35 fotogramas.

Curso Bsico De Flash 8 (Mltiples Animaciones) Parte 14

por jmx en Animacin, Dibujo, Manuales, Tutoriales27 de November de 2008 14:15 pm

1

Incorporar Mltiples Animadas A Una Pelcula FlashCuando se realiza una animacin en la cual se involucre por lo menos dos animaciones, es recomendable que estas animaciones se trabajen en capas separadas, con el fin de que si es necesario editar elementos esta sea ms fcil de hacer.

A continuacin aprenders hacer una animacin de una carita feliz, con movimiento de los dos ojos por separado, esto es, que cada ojo este en una capa con una Interpolacin de movimiento en cada una de ellas. aqu pondrs en prctica todos los conocimientos adquiridos tales como: dibujar formas vectoriales, usar coordenadas, insertar fotogramas, modificar formas vectoriales, hacer animaciones de interpolacin de movimiento. Crear el documento en que estar la animacin.

Este documento tiene de Propiedades ctrl. + J, dimanaciones 200 * 200 pxeles, color de fondo #FFFFFF y velocidad de fotogramas 12 fps.

La animacin estar realizada en su totalidad en la Escena. En la Capa 1 seleccionar el fotograma nmero 1 y en el dibujar un crculo (herramienta valo letra O en el teclado), las Propiedades del crculo son: Dimensiones 150.0 * 150.0 pxeles de ancho y alto, Coordenadas X: 25.0 y Y: 25.0, Color de Trazo (borde) #000000, Altura de Trazo (borde) 2, Estilo de Trazo Slido y Color de Relleno #FFFF00.

Una vez dibujado el crculo, seleccionar el frame nmero 20 e insertar un fotograma F5. Insertar una segunda Capa, automticamente se insertaran un total de 20 fotogramas, en el fotograma nmero 1 de esta nueva capa dibujar una Lnea recta (herramienta Lnea letra N en el teclado), las propiedades de la lnea son: Dimensiones 100.0 * 0.0 pxeles de ancho y alto, Coordenadas X: 50.0 y Y: 135.0, Color de Trazo (borde) #000000, Altura de Trazo (borde) 2 y Estilo de Trazo Slido.

La lnea dibujada representara la boca de la carita feliz. Tomar la herramienta de seleccin, luego colocar el cursor en el centro la lnea y arrastrarla un poco hacia abajo.

Insertar una tercera Capa en ella dibujar dos crculos (herramienta valo letra O en el teclado), las Propiedades del crculo son: Dimensiones 30.0 * 30.0 pxeles de ancho y alto, uno de los crculos colocarlo en Coordenadas X: 50.0 y Y: 70.0.

No colocar Color de Trazo al crculo y usar como Color de Relleno #000000.

Para hacer el segundo crculo basta con seleccionar el que se dibujo y Copiarlo (ctrl. + C) y despus Pegarlo (ctrl. +V).

Una vez que se halla pegado colocar este segundo crculo en Coordenadas X: 120.0 y Y: 70.0.

Ahora hacer las animaciones que corresponden al movimiento de los ojos. Primero hacer la animacin que corresponde al ojo izquierdo.

Insertar una Capa 4, dibujar en el fotograma nmero 1 un crculo (herramienta valo letra O en el teclado).

Las Propiedades del crculo son: Dimensiones 10.0 * 10.0 pxeles de ancho y alto, Coordenadas X: 50.0 y Y: 80.0.

No colocar Color de Trazo al crculo y usar como Color de Relleno #FFFFFF.

Seleccionar el fotograma nmero 20 y convertirlo en fotograma clave con solo presionar F6. Hacer clic sobre el crculo del fotograma nmero 20 y colocarlo en Coordenadas X: 70.0 y Y: 80.0.

Seleccionar un fotograma entre el nmero 1 y el nmero 19 de la Capa 4, hacer clic con el botn derecho del ratn, y en el men emergente seleccionar la opcin Crear interpolacin de movimiento. De esta forma el crculo en color blanco se mover de izquierda a derecha.

Ahora hacer la animacin que corresponde al ojo derecho. Insertar una quinta Capa, en el fotograma nmero 1 dibujar un crculo (herramienta valo letra O en el teclado), las propiedades del crculo son:

Dimensiones 10.0 * 10.0 pxeles de ancho y alto, Coordenadas X: 120.0 y Y: 80.0.

No colocar Color de Trazo al crculo y usar como Color de Relleno #FFFFFF.

Seleccionar el fotograma nmero 20 y convertirlo en fotograma clave con solo presionar F6. Hacer clic sobre el crculo del fotograma nmero 20 y colocarlo en Coordenadas X: 140.0 y Y: 80.0.

Seleccionar un fotograma entre el nmero 1 y el nmero 19 de la Capa 5, hacer clic con el botn derecho del ratn, y en el men emergente seleccionar la opcin Crear interpolacin de movimiento. De esta forma el crculo en color blanco se mover de izquierda a derecha.

Presionar ctrl. + Enter y podrs observar la animacin en todo su esplendor

Como te puedes dar cuanta la animacin de los ojos tiene un salto que no la hace ver profesional, sin embargo, este problema se soluciona:

Primero seleccionar el frame 40 de las Capas 1, 2, y 3, luego insertar un fotograma F5.

Despus en las Capas 4 y 5 insertar un fotograma clave F6 en el frame 40.

Seleccionar el crculo de la Capa 4 el fotograma nmero 40 y cambiarlo a Coordenadas X: 50.0 y Y: 80.0.

Ahora seleccionar el crculo de la capa ojo derecho del fotograma nmero 40 y cambiarlo a Coordenadas X: 120.0 y Y: 80.0.

Para finalizar con las animaciones de los ojos, seleccionar un fotograma entre el nmero 20 y el fotograma nmero 39 de las Capas 4 y 5, hacer clic con el botn derecho del ratn, y en el men emergente seleccionar la opcin Crear interpolacin de movimiento. Presionar ctrl. + Enter y podrs observar que existe una diferencia entre las dos animaciones.

Hasta este momento has adquirido los conocimientos para trabajar con distintas herramientas. Tambin has trabajado con un buen nmero de animaciones (interpolacin de movimiento), ya es tiempo de intentar hacer una animacin pero esta vez incorporando los paneles que fueron descritos en los primeros captulos (captulos 1 2 3).

Curso Bsico De Flash 8 (Edicin De Capas, Smbolos E Incorporacin De Paneles) Parte 15

por jmx en Animacin, Dibujo, Manuales, Tutoriales13 de December de 2008 21:12 pm

3751http://www.estiloflash.com/curso-basico-de-flash-8-edicion-de-capas-simbolos-e-incorporacion-de-paneles-parte-15/375/Curso+B%C3%A1sico+De+Flash+8+%28Edici%C3%B3n+De+Capas%2C+S%C3%ADmbolos+E+Incorporaci%C3%B3n+De+Paneles%29+Parte+152008-12-14+00%3A12%3A16jmx

Edicin de capasCuando se trabaja con mltiples Capas es muy frecuente que puedas batallar para encontrar las formas que estn dispuestas en una u otra Capa, por ello se te aconseja que cambies de nombre a cada una de las Capas y as puedas ubicar cada uno de las formas vectoriales con una mayor facilidad.

En el ejemplo anterior se trabajo con 5 Capas, pero no sabes con exactitud en donde se encuentra cada una de las formas. La solucin a este conflicto es hacer doble clic sobre el nombre de la Capa y despus cambirselo por uno que describa el contenido de la Capa. Por ejemplo en la Capa 1 del trabajo anterior esta dibujado la base de la carita feliz, sustituir el nombre de Capa 1 por el de fondo amarrillo. En la Capa 2 esta dibujada la lnea de la boca, sustituir el nombre de Capa 2 por el de boca. Cambiar el nombre de la Capa 3 por el de fondo de ojos, el de la Capa 4 por el de ojo izquierdo y cambiar el nombre de la Capa 5 por de ojo derecho.

Aplicacin de smbolos e incorporacin de panelesCuando se trabaja con animaciones un poco ms elaboradas forzosamente tienes que incorporar los diferentes smbolos de Flash (Clip de pelcula , Botn y Grfico) as como tambin diferentes paneles de herramientas con los cuales te ayudaras para la realizacin de las animaciones, los paneles ms utilizados son: Panel de Propiedades del Documento (ctrl. + J), Panel de Biblioteca (ctrl. + L o F11), Panel de Mezclador de Colores (shift + F9), Panel de Transformar (ctrl. + T). Estos smbolos y paneles ya fueron descritos con anterioridad y ahora solamente te enfocaras en su aplicacin.

Creacin de smbolos de Tipo Clip de pelcula

Cuando se disea una animacin en la que se involucre la participacin de varias capas, es ms recomendable hacer las animaciones en diferentes smbolos y despus solamente colocar cada uno de los smbolos en la Escena para la visualizacin en aun archivo SWF.

La animacin que a continuacin se te presenta esta realizada en un documento de Propiedades ctrl. + J, dimensiones del documento 250 * 250 pxeles, color de fondo #FFFFFF y velocidad de fotogramas 12 fps.

En el siguiente ejemplo trabajaras con animaciones de interpolacin de movimiento en clips de pelcula. En esta animacin estarn involucrados parmetros tales como: movimiento girar, nmero de giros, color alfa, color tinta.

Para crear un smbolo tienes tres opciones la primera es, seguir la siguiente ruta Insertar >> Nuevo smbolo, la segunda es mediante el Panel de Biblioteca haciendo clic en el icono correspondiente y la tercera es presionando en el teclado ctrl. + F8.

Cuando aparece el panel de Crear un nuevo smbolo, cambiar las propiedades, colocar un nombre que describa la accin que se estar llevando acabo en el smbolo. Luego seleccionar el Tipo de smbolo con el cual se va a trabajar. En este caso colocar como nombre cuadrado girando y seleccionar la opcin Clip de pelcula.

Una vez que te encuentres ubicado en el smbolo, dibujar un cuadrado (R) de dimensiones 200.0 *200.0, colocar el cuadrado en coordenadas X: 0.0 y Y: 0.0, no usar color de borde y colocar como color de relleno #00FF00. As comenzaras a crear una animacin de Interpolacin de movimiento.

Luego seleccionar el frame nmero 20 e insertar un fotograma clave F6, una vez que el fotograma clave haya sido insertado seleccionar un punto entre el fotograma nmero 1 y el fotograma nmero 19 y hacer clic sobre este fotograma con el botn derecho del ratn, en el men emergente seleccionar la opcin Interpolacin de movimiento.

Seleccionar la forma vectorial del fotograma nmero 20 y hacer visible el Panel de Transformar ctrl. + T, seleccionar la casilla de Restringir, reajustar el porcentaje en alguna de las casillas Anchura o Altura al 10.0 %. As el tamao del cuadrado se vera reducido.

Ahora seleccionar el cuadro reducido del fotograma nmero 20, en el Panel de Propiedades seleccionar la opcin de Color: Alfa y reducir el Porcentaje de 100% a 0%. Con esta modificacin la animacin del cuadrado se disminuir de tamao y al mismo tiempo se estar desvaneciendo.

Hacer una variante ms a la animacin, seleccionar el cuadrado del fotograma nmero 1, y en el Panel de Propiedades seleccionar la casilla de Giro: Horario.

Curso Bsico De Flash 8 (Interpolacin De Movimiento) Parte 16

por jmx en Animacin, Dibujo, Manuales, Tutoriales13 de December de 2008 21:36 pm

5

Interpolacin de movimientoPracticar otro ejemplo de animacin que est contenida en la misma pelcula FLA. En esta animacin queda establecida una interpolacin de movimiento de zoom, en la animacin tambin se involucra el cambio de color alfa.

Primero debes crear un nuevo smbolo ctrl. + F8, nombrar al smbolo valo girando y seleccionar la opcin de Clip de pelcula.

En este smbolo hacer una animacin de un valo (O), de dimensiones 40.0 * 70.0 pxeles de ancho y alto, colocarlo en coordenadas X: 0.0 y Y: 0.0, no usar color de borde y colocar como color de relleno #00FFFF.

Seleccionar el frame nmero 20 e insertar un fotograma clave F6, despus seleccionar un punto entre el fotograma nmero 1 y el fotograma nmero 19 y hacer clic sobre este fotograma con el botn derecho del ratn, en el men emergente seleccionar la opcin Interpolacin de movimiento.

Seleccionar la forma vectorial del fotograma nmero 1 y en el Panel de Transformar ctrl. + T, seleccionar la casilla de Restringir, reajustar el porcentaje en alguna de las casillas Anchura o Altura al 10.0 %.

Ahora seleccionar la forma vectorial del fotograma nmero 1, en el Panel de Propiedades seleccionar la opcin de Color: Alfa y reducir el Porcentaje de 100% a 0%.

Para hacer la variante de movimiento en esta animacin, seleccionar el fotograma nmero 1, y en el Panel de Propiedades seleccionar la casilla de Giro: AntiHorario y en la casilla de Nmero de rotaciones escribir el nmero 4 veces.

Para conseguir que el valo cambie de su color original #00FFFF a otro cualquiera, simplemente seleccionar el valo del fotograma nmero 20 y en el Panel de Propiedades seleccionar la opcin Color: Tinta luego seleccionar un color diferente.

Regresar a la Escena, hacer visible el Panel de la Biblioteca ctrl. + L y luego arrastrar desde esta el smbolo cuadrado girando y colocarlo en coordenadas X: 25.0 y Y: 25.0.

Ahora arrastrar el smbolo valo girando hacia la Escena y colocarlo en coordenadas X: 144.4 y Y: 140.4. Cuando se hace una animacin de interpolacin de movimiento automticamente se crean smbolos del Tipo Grfico no borrar estos smbolos porque la animacin se perder irremediablemente. Presionar ctrl. + Enter y observar la animacin que se ha creado.

Curso Bsico De Flash 8 (Smbolos De Tipo Botn) Parte 17

por jmx en Animacin, Dibujo, Tutoriales18 de January de 2009 00:59 am

0

Creacin de smbolos de Tipo BotnLos smbolos del Tipo Botn son de mucha importancia en las animaciones Flash, con estos botones se puede controlar las a