Curso Básico De Flash 8 (Conceptos Básicos De Flash) Parte 1por jmx en Dibujo, Manuales, Tutoriales17 de September de 2008 16:00 pm

9

Bienvenido Al Curso Básico De Flash 8, este curso esta dirigido particularmente a personas que están iniciando con el aprendizaje de flash, y aquí aprenderás desde como crear un documento nuevo, la utilización de las principales herramientas, también aprenderás a utilizar los principales paneles de diseño, al finalizar el curso sabrás como hacer visibles los paneles y herramientas de diseño web con el método de teclas, el método del teclado hace que los trabajos se realicen con mayor prontitud. También aprenderás los conceptos básicos que se manejan en la línea de tiempo y hasta como hacer animaciones de textos y aplicación de botones. Una vez que hayas concluido con la totalidad del Curso Básico Flash 8 tendrás los suficientes argumentos como para comenzar hacer pequeñas animaciones en forma semiprofesional, estas animaciones  las podrás colocar sin ningún problema el en los diferentes portales que existen en Internet de forma gratuita.

1. Conceptos Básicos De Flash

Descripción De Flash

Macromedia Flash Professional 8, le proporciona todas las herramientas necesarias para crear y publicar diseños y animaciones en la web en forma profesional. Con Flash puedes llegara crear desde aplicaciones básicas de animación hasta complejas aplicaciones con contenido Web (paginas web). Macromedia Flash Professional 8 es un programa esencialmente para hacer animaciones vectoriales, sin embargo, también se pueden crear aplicaciones de Flash con una amplia variedad de contenido multimedia que incluye imágenes, sonido, vídeo y efectos especiales. Si solo son incluidas animaciones vectoriales, puedes utilizar las herramientas de Flash como son (línea, óvalo, rectángulo polígono, 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 imágenes las cuales tengan extensión jpg, gif, png, mapa de bits, etc. el peso (kbs) de los archivos resultara ser mas pesado y por lo tanto tardara más tiempo en ser visualizado en la web. Flash Professional 8 es una poderosa herramienta de con la que podrás diseñar y desarrollar grandes presentaciones (Animaciones, Juegos, InterfacesdeNavegación.), Los proyectos de Flash pueden abarcar desde simples animaciones hasta contenido de vídeo.

Creación De Documentos

Para comenzar a trabajar con Macromedia Flash Professional 8, lo primero que debes de tomar en cuenta es la creación del documento en cual vas a desarrollar la presentación, 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 Professional 8.

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, Presentación de Flash, Aplicación 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 específica. Sin embargo, en esta ocasión solamente nos enfocaremos al Documento de Flash.

Haga clic en Aceptar y aparecerá la forma del documento predeterminada por Macromedia Flash Professional 8.

El documento predeterminado incluye el nombre del documento (Sin título-1).

El tamaño del documento (550 x 400 píxeles).

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

Los colores se representa por el símbolo # y luego una secuencia de de seis letras y números alternados Ej. para el color rojo la secuencia es #FF0000.

Una forma más rápida para crear un documento Flash es simplemente presionar las teclas de ctrl. + N.

Propiedades Del Documento

En escasas ocasiones se trabaja con documentos con características de tamaño, color de fondo, velocidad de fotogramas etc. predeterminadas por Macromedia Flash Professional 8. Así que tendrás que aprender a editar las características del diseño preestablecido por Macromedia Flash Professional 8. Para modificar las características del documento se siguen los uno de los procedimientos siguientes.

El primero de los procedimientos es Modificar >> Documento. Este procedimiento tal vez resulte el más largo, pero nunca esta demás conocer

más de una forma para obtener un fin.

La segunda opción es simplemente hacer clic en el espacio de Tamaño de la barra de Propiedades, si colocas el cursor sobre el espacio señalado en la imagen aparecerá la leyenda (Propiedades del documento).

La tercera opción es la más fácil porque solamente tienes que presionar ctrl. + J. esta opción también puede resultar la más 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á más fácil de localizar tu archivo por los buscadores web.

También puedes incluir una breve descripción del archivo, esto hará que el archivo contenga más datos y de esta forma serás más popular en la web.

En las casillas de Dimensiones de (ancho y alto), podrás modificar el tamaño 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 están programadas con código ActionScript en las cuales la transición

tiene que avanzar rápido o disminuir la velocidad. Este concepto se describirá con más detalle en capítulos siguientes.

Por ultimo podrás modificar la opción de Unidades de regla, en las cuales se incluyen: Pulgadas, Pulgadas (decimales), Puntos, Centímetros, Milímetros y Píxeles. Las Unidades de regla que se recomiendan usar son los Píxeles.

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 Tamaño del documento (dimensiones), Fondo (color de fondo), Velocidad de fotogramas (fps), nombre del documento, así también se te presenta la barra de herramientas.

Hasta este punto cuantas con la información necesaria para crear y modificar las diferentes características de un documento de Macromedia Flash Professional 8, en el siguiente punto de este capitulo veras la descripción de las herramientas de trabajo más utilizadas en Macromedia Flash Professional 8.

Curso Básico De Flash 8 (Herramientas De Trabajo) Parte 2por jmx en Dibujo, Manuales, Tutoriales25 de September de 2008 15:17 pm

8

Descripción Herramientas De Trabajo.

Las herramientas de Macromedia Flash Professional 8 proporcionan una gran variedad de ayuda cuando se trabaja en animaciones con vectores líneas, textos, óvalos, rectángulos. Flash también 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 más práctico la utilización de las herramientas de flash te menciono como invocar las diferentes herramientas desde el teclado. A continuación te presento una descripción de las herramientas más usadas en flash.

La primera herramienta que se describirá es la Herramienta De Selección, 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 imágenes a través del escenario, te ayuda a editar las formas que selecciones en cuanto a color tamaño etc, también 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 Selección 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 Línea. Como el nombre lo menciona sirve para dibujar líneas rectas las cuales puedes modificar a líneas curvas con la ayuda de la Herramienta De Selección. La forma rápida para invocar la Herramienta Línea es la letra N en el teclado.

Herramienta Texto con ella podrás introducir 3 clases de campos de texto, el más común es el campo de Texto extático con este tipo de texto podrás realizar animaciones en la línea de tiempo. Los otros dos tipos de campos de textos son el Texto dinámico e Introducción de texto estos tipos de texto siempre van acompañados de código ActionScript por la complejidad para trabajar con este tipo de texto, solamente se realizaran animaciones con campos de Texto estático. Forma rápida para invocar la herramienta de texto es la letra T en el teclado.

La Herramienta De Óvalo sirve para dibujar círculos perfecto (10×10 píxeles), u óvalos (10×30 píxeles). Para invocar la Herramienta De Óvalo en forma rápida es la letra O en el teclado.

Herramienta De Rectángulo, con ella podrás dibujar cuadrados perfectos (10×10 píxeles) o bien rectángulos (10×30 píxeles), con la ayuda de una Herramienta Para El Rectángulo 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 rectángulo aparecerá una herramienta diferente la cual es PolyStar y te ayudara a dibujar formas de Estrellas o formas de Polígonos (pentágonos, hexágonos, etc.). forma rápida de invocar la Herramienta De Rectángulo 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 descripción de la Herramienta De Transformación De Relleno. Esta herramienta muy útil cuando se usan colores degradados ya que

modifica la perspectiva del degradado. La forma rápida para invocar esta herramienta es la letra F en el teclado.

Paneles más utilizados

Macromedia Flash Professional 8 dispone de una serie de paneles los cuales hacen que el trabajo para realizar animaciones sea más fácil y rápido de aprender. Estos paneles están agrupados en diferentes secciones, los diferentes paneles de los que dispone Macromedia Flash Professional 8 los podrás visualizar si haces clic en la Herramienta De Ventana. Los paneles más utilizados son: Propiedades, Biblioteca, Acciones, Mezclador de colores y Transformación. En el siguiente punto te daré una descripción de cada uno de estos paneles así como también una forma rápida para invocarlos.

Panel De Propiedades

En 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 están incluidos el panel de Filtros y Parámetros. Estos paneles son de mucha ayuda, sin embargo, estas herramientas no serán expuestas en la explicación.

Por ejemplo; cuando tienes seleccionada la Herramienta De Selección (V) en el Panel De Propiedades se te muestra el tamaño del escenario (dimensiones de documento), color de fondo y velocidad de fotogramas 12 fps, también se te muestra el tipo de versión que estas usado (Reproductor: 8 en este caso y la versión de ActionScript: 2).

Cuando seleccionas la Herramienta Línea (N) el panel te presenta el nombre de la herramienta, el color de línea y el tamaño de la línea.

Las propiedades que se presentan para la Herramienta Texto (T) son el tipo de texto (estático, dinámico e introducción de texto), color, tamaño, tipo de alineación, etc.

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

Herraminta Rectángulo (R)

y la Herramienta PolyStar

son similares ya que te muestran el color de línea (trazo), color de relleno, tamaño de trazo, tipo de trazo. En particular cada una de estas herramientas tiene una finalidad específica, en puntos subsecuentes se profundizara con más detalle cada una de estas herramientas, al hacer un ejercicio para cada una de ellas.

Panel Biblioteca

El Panel Biblioteca es donde se guardan y organizan los símbolos 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 título-1. también  te muestra los diferentes tipos de símbolos estos son Clip de película, Botón y Gráfico, flash nombra a los diferentes símbolos como Símbolo 1, Símbolo 2, Símbolo 3…n, sin embargo resulta más practico nombrar a cada uno de los símbolos con nombres especifico que describa o que esta colocado en cada uno de ellos. En su momento en el punto incorporación de símbolos se explicara con más detalle cual es la propiedad que tienen cada uno de los símbolos. Se pueden colocar tantos símbolos de cada tipo como sean necesarios para la realización de una animación. El Panel De Biblioteca también cuenta con la opción de Bote De Basura (eliminar) es de suma importancia para eliminar símbolos que no nos sean útiles solo basta con seleccionar el símbolo y luego presionar el Bote De Basura. La forma más rápida 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 código ActionScript con las cuales puedes controlar la línea de tiempo, se puede agregar cogido ActionScript a símbolos tipo Botón, Clips de película y a Fotogramas. Hay dos formas para obtener las funciones de código la primera es presionar el signo de y de esta forma aparecerán las diferentes funciones. La segunda opción es presionar y luego hacer doble clic en los diferentes libros mostrados, las funciones de código ActionScript son las mismas en cualquiera de los dos casos. El título del panel Acciones cambia a Acciones – Botón, Acciones – Clip de película o Acciones – Fotograma, según el elemento que esté seleccionado. Para mostrar el Panel Acciones presionar F9.

Panel De Mezclador De Colores

El Panel De Mezclador De Colores es de gran utilidad cuando se trabaja con formas vectoriales (Óvalos o Rectángulos) los cuales tengan por color de relleno o color de trazo (borde) un degradado Lineal o Radial. Este panel además del los Tipos de Relleno (Ninguno, Sólido, Lineal, Radial y Mapa de bits) también incluye la opción 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 acompañado por el Panel De Muestras De Colores. Para la invocación del El Panel De Mezclador De Colores basta con presionar en el teclado shift + F9.

Panel Transformar

Cuando se tiene que editar una forma vectorial o una Imagen Importada ya sea que la tengas que hacer más 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 opción 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 también puedes Rotar una forma o Sesgarla horizontal o verticalmente según sean las necesidades. Para la invocación del Panel Transformar presionar la secuencia de teclas ctrl. + T.

En este punto has obtenido los conocimientos suficientes para saber que función tienen los diferentes paneles diseño web en Macromedia Flash 8. Si cuentas con alguna duda en los puntos aquí expuestos no dudes en dejar tu comentario y con gustos serán atendidos a la menor brevedad.

Curso Básico De Flash 8 (Espacio De Trabajo) Parte 3por jmx en Dibujo, Manuales, Tutoriales1 de October de 2008 21:26 pm

3

Establecer El Espacio De Trabajo

Cuando se trabaja con Macromedia Flash Professional 8 establecer el área de trabajo es de mucha importancia ya que te permitirá tener un panorama más 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 estratégicas tendrás una mejor perspectiva de todo el escenario.

Una primera recomendación 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 más utilizados para la realización de animaciones en Macromedia Flash.

Una segunda opción para agrupar los paneles más usados es colocarlos en una sola barra, esta acción 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 arrastrándolos 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 podrás desplazar los paneles a cualquier parte del documento Flash.

Establecer el espacio de trabajo

Las herramientas de selección,  borrador y cambio de color también son de mucha importancia cuando se esta trabajando con presentaciones Flash, ya que como el nombre de cada herramienta lo indica, la Herramienta de Selección sirve para; seleccionar símbolos, colores, fotogramas en la línea de tiempo, propiedades del documento, etc. y la Herramienta de Borrador perite borrar partes del relleno de alguna forma dibujada, quitar bordes.

En esta sección 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 Selección, Bote de Tinta, Cubo de Pintura, Borrador, Borrador Grifo, las herramientas 3 y 4 están incorporadas a las herramientas 5 y 6 respectivamente.

Herramienta de Selección (V)

La primera herramienta a definir es la herramienta de selección la cual aparece seleccionada de forma automática cada vez que se inicia (abre) el programa de Flash, para invocarla de forma rápida es presionando la tecla (V) en el teclado.

Esta herramienta te ayudara a editar (dibujos) formas vectoriales como son: rectángulos, óvalos, líneas, o sea podrás seleccionar parte o formas completas de algún dibujo para luego modificarlas.

La imagen muestra 3 diferentes cuadros, el cuadro 1 muestra que no posee ninguna selección.

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 Básico De Flash 8 (Herramienta De Borrador) Parte 4por 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 opción es seleccionar el (tamaño y forma de borrador), y la segunda opción es seleccionar que es lo que se quiere eliminar de una forma vectorial dibujada. Una forma rápida para invocar la herramienta de borrador es presionar en el teclado la letra E.

Cuando se selecciona la herramienta borrador te da la opción de que escojas el tamaño y forma del borrador, según sean las necesidades de borrado. Puedes elegir entere 5 diferentes tamaños de óvalos, la segunda opción que tienes para elegir el tamaño y forma, son entre 5 diferentes tamaños de cuadrado.

Las opciones más comunes para eliminar (borrar) formas vectoriales son: borrado normar, borrar rellenos, borrar líneas. Cada una de estas opciones son específicas para cada necesidad que se tenga.

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

Los cuadros marcados con el # 2 están borrados con la opción de borrar rellenos, este tipo de borrador no elimina nada de contorno (borde) por más que pases el borrador por encima del contorno.

Las formas vectoriales marcadas con el # 3 están borradas con el borrador de líneas, con esta opción no borraras nada de relleno, y solo podrás borrar los contornos (bordes) de las formas vectoriales dibujadas. La opción de borrar rellenos es lo contrario a borrar líneas.

Herramienta de borrador Grifo.

Además de las opciones de tamaño, 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 tendrás que situarte en la posición a borrar y luego simplemente hacer clic. Esta herramienta es de lo más fácil de manejar como lo podrás constatar.

En las imágenes 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 capítulos posteriores te mostrare como cambiar el color de trazo y de relleno de diferentes formas geométricas.

Curso Básico De Flash 8 (Herramientas Edición de Color) Parte 5por jmx en Dibujo, Manuales, Tutoriales16 de October de 2008 20:30 pm

1

Herramientas edición de color

La 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 invocación 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 opción Colores y luego hacer clic en el recuadro que corresponde a color de trazo en la imagen esta marcado con el # 1.

La segunda opción para cambiar el Color de trazo es desde del panel de Propiedades. Es más recomendable trabajar desde esta opción ya que también puedes manipular las opciones de altura y estilo de trazo.

Cuando se tiene seleccionado el color que será aplicado al borde tendrás 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 números a un mayor número más grueso aparecerá el borde y a un menor número 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 automática marcada con el número 1, para cambiar la altura hay dos formas, la primera es hacer clic sobre la posición marcada con el # 1 y luego deslizar la barra hasta un número apropiado, la segunda forma es talvez la más recomendable, esto es hacerlo de forma manual, colocar el cursor sobre la casilla de la altura de trazo y escribir el número apropiado. Flash acepta como altura mínima 0.1 y como altura máxima 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 diseños 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 más simple de usar que la herramienta de (Bote de pintura), para la invocación 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 posición marcada con el número 1  o desde la posición marcada con el número 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 Professional 8.

Curso Básico De Flash 8 (Herramientas Comunes) Parte 6por jmx en Dibujo, Manuales, Tutoriales22 de October de 2008 20:15 pm

0

Trabajar con herramientas más comunes .

Antes de comenzar con conceptos de animación, fotogramas, símbolos, etc. es necesario primero aprender a dibujar simples formas vectoriales (líneas, óvalos, rectángulos, etc.), porque de ello depende en gran parte la animación. En este punto aprenderás a usar las herramientas de línea, óvalo, rectángulo, polígono y texto.

Herramienta de Línea (N).

La primera de las herramientas que será descrita es la Herramienta  De Línea, con ella te podrás ayudar para hacer línea rectas o curvas según sean las necesidades del proyecto (diseño web , animación, botón etc .). Para comenzar a trabajar con la herramienta de Línea basta con seleccionarla en el panel de herramientas, o bien invocándola presionando la latera N en el teclado.

Cuando esta selecciona la Herramienta De Línea, aparece en la barra de propiedades el nombre de la herramienta así como el icono que la representa, también 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 Línea 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 línea esta siendo trazada con cierto grado de inclinación (línea diagonal).

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

Con la herramienta de Línea 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 líneas que harás son rectas. Estas pueden ser horizontales o verticales, la figura de la letra (b) muestra este tipo de línea (horizontal).

Un buen truco para hacer líneas con un grado inclinación 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 línea. La figura marcada con la letra (c) representa una línea a 45º.

Para hacer que una línea incremente de tamaño hay dos métodos, este es el primero y el más fácil de aplicar. Colocar el cursor sobre uno de los extremos de la línea, en la parte inferior del cursor aparecerá la mitad de un cuadrado (esto indica que es una línea recta). Después solamente arrastrar el cursor en la dirección deseada y de esta forma crecerá la línea. Las figuras marcadas con las letras (a y a´) son un ejemplo de lo antes descrito.

Cuando se quiere obtener una línea curva a partir de una línea recta, basta con colocar el cursor sobre un punto de en medio (nunca en los extremos), aparecerá en la parte inferir del cursor una pequeña línea curva. Después solamente arrastrar el cursor hacia abajo o arriba. La figura de la letra (b) indica una línea recta y la figura (b´) indica que se transformo a una línea curva.

El segundo método para hacer que incremente de tamaño una línea es, primero seleccionar la línea y en el Panel de Propiedades aparecerán las casillas que representan lo ancho y alto (An.: y Al.:) así como también las casillas que representan las coordenadas X: y Y: en las que se encuentra situada la línea (forma).

Cambiar las dimensiones en la casilla a lo ancho (An.:), en este caso se incremento el tamaño de la línea a 150.0 píxeles. Las coordenadas no fueron modificadas.

Herramienta de Óvalo (O).

La segunda herramienta a describir es igual de importante que la herramienta de (Línea). Cuando se hacen diseños 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 también los diferentes parámetros 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 (+) estarás listo para comenzar a trazar el Óvalo o Círculo según sean las necesidades.

Los óvalos y círculos se pueden deformar en otras formas. Este punto se vera con mayor profundidad en otro capítulo (edición de formas vectoriales para la animación).

Cuando se dibuja con la herramienta de Óvalo se pueden visualizar dos diferentes formas de círculos pequeños en la parte inferior derecha.

En la primera forma marcada con el número 1 aparece un circulo pequeño en la parte inferior derecha, esto indica que se esta dibujando un Óvalo.

En la forma marcada con el número 2 aparece un círculo de mayor tamaño, lo cual te indica que se esta dibujando un círculo 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 parámetros te ahorraras mucho tiempo en la realización de tus trabajos.

En la figura número 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 número 3 para que se visualice un círculo perfecto con color de trazo (borde) #000000, color de relleno #FFFF00 y altura de trazo 1.

En el próximo capítulo se te mostrara cuales son las propiedades le las herramientas Rectángulo y PolyStar.

Curso Básico De Flash 8 (Herramientas Rectángulo & PolyStar) Parte 7por jmx en Dibujo, Manuales, Tutoriales30 de October de 2008 13:10 pm

0

Herramienta de Rectángulo (R).

La herramienta de Rectángulo al igual que las herramientas de Línea y Óvalo, es de mucha utilidad en los trabajos de Flash, ya que gracias a ella puedes hacer figuras vectoriales de rectángulos o cuadros. Para comenzar a trabajar con esta herramienta solamente presionar en la barra de herramientas el icono que representa al Rectángulo, o en el teclado presionar la letra R.

Cuando es invocada la herramienta de Rectángulo aparece sobre el Panel de Propiedades el nombre de la herramienta así como también el icono que la representa.

Los parámetros de edición 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 rectángulo pueden deformarse en otras (metamorfosis), este punto será tocado en otro capitulo (edición de formas vectoriales para la animación).

Como se menciono anteriormente, se pueden dibujar tanto formas vectoriales de rectángulos como de cuadrados.

Cuando es el caso que se dibujan rectángulos aparece un círculo pequeño 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 círculo te tamaño más grande, la figura # 2 representa a un cuadrado.

En la figura marcada con el # 1 se dibujo un rectángulo 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 parámetros.

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 (Polígono).

La herramienta que a continuación se describe esta contenida dentro de la herramienta de Rectángulo, una vez que selecciones la herramienta de PolyStar puedes hacer dos variantes una para dibujar Polígonos y la segunda para dibujar Estrellas.

Primero tienes que tienes que mantener presionado el icono  de la herramienta del Rectángulo, 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 rectángulo por un icono de hexágono.

Nota: no puede ser posible la invocación de la herramienta PolyStar desde el teclado, así que tienes que seguir el método descrito.

Como ya fue mencionado puedes dibujar tanto Polígonos 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 (Configuración de herramientas).

Hacer clic sobre el espacio que despliega el Estilo. Aquí es en donde están contenidos los Estilos de Polígono y de Estrella

Hacer un primer ejercicio con la herramienta Polígono. Seleccionar la herramienta de PolyStar, hacer clic en la casilla de Opciones…

Seleccionar el Estilo de Polígono y en el Número de lados escribir 5.

Es esta forma la herramienta esta configurada para dibujar un Polígono de 5 lados (pentágono). El pentágono posee color de trazo #000000, color de relleno #00FF00 y altura de trazo 1

Nota: Para con figurar los parámetros de color de relleno, color de trazo y altura de trazo, se manejan igual que en el caso del Óvalo y Rectángulo.

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 Configuración de herramienta seleccionar en Estilo Estrella y Número 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 Básico De Flash 8 (Herramientas Texto & Transformación de Relleno) Parte 8por 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, también puedes introducir textos ya sea para  un formulario de contacto o para contraseñas. Los trabajos que puedes llegar hacer con la herramienta de texto son muchos y muy variados. Sin embargo, la explicación que se te darás a continuación es básica 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 parámetros de texto con los que te puedes ayudar para dar formato al texto.

Las herramientas básicas para dar formato al texto son: Tipo de fuente, Tamaño de fuente, Color de fuente, Texto en negrita y/o cursiva, Tipo de alineación (izquierda, centrado, derecha y justificado), junto con estas herramientas de formato flash también cuenta con una opción que la de Espacio entre letras, esta última opción es de mucha utilidad ya que hay veces que el texto queda muy amontonado y con esta opción podrás separar el espacio entre letras o reducir el espacio entre letras según sea tu caso.

A continuación 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 parámetros (Tamaño de fuente, Texto en negrita y Espacio entre letras).

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

Practicar la el texto 2, y de esta forma te podrás familiarizar con mayor rapidez con los distintos parámetros de formato de la Herramienta texto.

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

Herramienta de Transformación de Relleno (F)

La herramienta de Transformación 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: tamaño del degradado, dirección del degradado o con respecto al centro focal y punto central. La aplicación de los colores de relleno en forma de degradado son muy fáciles de establecer en las diferentes formas vectoriales (óvalos “O”, rectángulos “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 opción de Tipo, tiene dos opciones de Estilo de relleno para la creación de un degradado. Las opciones para el degradado son Lineal y Radial. Primero se trabajara con la opción de Estilo relleno Lineal.

Luego simplemente dibujar una forma vectorial (óvalo ó rectángulo), 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 están marcados con el número 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 opción de Transformación de relleno (F), y luego seleccionar el objeto dibujado.

Cuando se ha seleccionado el objeto en cuestión, podrás proceder a modificar el color de relleno en tres diferentes opciones tal y como se muestra en el objeto dibujado.

*Rotación, con esta opción podrás hacer girar el color de relleno en cualquier dirección.

**Tamaño de ancho, esta opción permite hacer que crezca o disminuya el tamaño del degradado.

***Punto centrar, este punto te permitirá cambiar de posición 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 Transformación de relleno: *Rotación, **Tamaño de ancho y ***Punto centrar.

Para trabajar con la opción de degradado Tipo (Estilo de relleno Radial). Los pasos a seguir son básicamente los mismos que en el caso del Estilo de relleno Lineal.

Cuando es seleccionada la herramienta de Transformación de relleno (F), para modificar el relleno degradado el objeto los parámetros a modificar cambian en relación al caso del tipo Lineal.

Los parámetros a modificar en el caso del Tipo Radial son:

a Punto focal, modifica la iluminación focal en reilación al punto del centro.

b Punto centrar, este punto te permitirá cambiar de posición el punto del centro del color de relleno.

c Tamaño de ancho, esta opción permite hacer que crezca o disminuya el tamaño del degradado en cuanto a lo ancho.

d Tamaño, seleccionar esta opción para hacer crecer o disminuir el tamaño del degradado en forma proporcional en reilación al centro.

e Rotación, con esta opción podrás hacer girar el color de relleno en cualquier dirección.

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 parámetros de a Punto focal, b Punto centrar, c Tamaño de ancho, d Tamaño y e Rotación.

Hasta este punto tienes los conceptos básicos para intentar hacer una animación, sin embargo, si no tienes la suficiente experiencia en el manejo de Programa Flash tendrás algunas complicaciones para establecer bien una buena animación. Por esta razón se te guiara para que conozcas conceptos básicos de la línea de tiempo, insertar fotogramas, fotogramas clave, hacer animaciones con interpolación de movimiento etc. una vez que tengas entendidos estos conceptos podrás hacer animaciones de una forma práctica y en forma profesional.

Curso Básico De Flash 8 (Conceptos Básicos Línea De Tiempo & Fotogramas) Parte 9por jmx en Dibujo, Manuales, Tutoriales15 de November de 2008 00:02 am

5

Conceptos Básicos de la Línea de Tiempo.

En el Programa Macromedia Flash 8 el manejo de la Línea de tiempo es esencial que la conozcas, ya que de ello depende en gran parte que una animación tenga un buen fin, en esta Línea de tiempo están dispuestos las diferentes formas vectoriales, animaciones, imágenes (jpeg, gif, png), etc. La Línea de tiempo esta constituida por: capas, fotogramas, fotogramas vacíos, fotogramas clave, fotogramas clave vacíos, velocidad de fotogramas, y tiempo transcurrido (tiempo que dura la animación). Recordar que Macromedia Flash 8 es como una obra de teatro en donde todo se tiene que representar en La Escena, y haciendo esta comparación las animaciones que se dispongan en los símbolos de clips de película, botones y gráficos en algún momento se tienen que arrastrar hacia la Escena para que puedan ser visualizados en el archivo SWF.

a Línea 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 vacíos, g fotogramas vacíos, h fotogramas, i fotogramas clave, j cabeza lectora de fotogramas, k muestra el número de fotograma en donde se encuentra la cabeza lectora, l velocidad de fotogramas por segundo (fps), m muestra el tiempo que ha transcurrido según 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 animación de cualquier tipo, siempre se empieza a partir de un fotograma clave vacío el cual se convierte en un fotograma clave cuando en el se inserta alguna forma vectorial o imagen.

Los fotogramas son de interés en la Línea de tiempo por que con ello se prolonga la animación, esto es a mayor número de fotogramas la animación será

más lenta, y por el contrario a menor número de fotogramas en la línea de tiempo la animación será más rápida.

En la siguiente imagen están 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, imágenes, etc. de cada uno de los fotogramas clave, estos quedaran listos para poder establecida una animación.

Los fotogramas clave están insertados en la Línea de tiempo en la posición número 1 y número 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 Vacíos, Fotogramas Clave, Fotogramas Clave Vacíos y Borrar Fotogramas de Cualquier Tipo.

En esta sección 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 menús emergentes después de hacer clic con el ratón.

Primero se trabajara con la inserción de fotogramas mediante el método de los menús emergentes, para insertar fotogramas, fotogramas vacíos, fotogramas clave y fotogramas clave vacíos, Solamente basta con seleccionar el fotograma en donde se quiere insertar cualquier tipo de fotograma. Luego hacer clic con el botón derecho del ratón, y en el menú emergente seleccionar el tipo de fotograma a colocar en la Línea de tiempo.

Si por alguna razón insertaste fotogramas de más, no preocuparte la solución a este tipo de problemas es usar la opción de quitar fotogramas. Seleccionar en la Línea de tiempo los fotogramas a eliminar, hacer clic con el botón derecho del ratón y seleccionar en el menú emergente la opción de Quitar fotogramas. Esta opción 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 vacío, F5 insertar fotograma y fotograma vacío, para borrar cualquier tipo de fotograma presionar shift + F5.

Curso Básico De Flash 8 (Interpolación De Movimiento) Parte 10por jmx en Animación, Dibujo, Manuales, Tutoriales15 de November de 2008 01:30 am

6

Interpolación de Movimiento con Formas Vectoriales .

Ahora es el tiempo de comenzar a practicar una pequeña animación mediante el método de Interpolación de movimiento, y de esta forma comenzaras a poner en practica los conocimientos adquiridos hasta este punto. En el método 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 método de Interpolación de movimiento: la primera es cambiar el color gradualmente de una forma vectorial, la segunda es mover una forma vectorial a través del Escenario y la tercera es una combinación de las dos anteriores en donde se cambia de color gradualmente y al mismo tiempo la forma vectorial se va moviendo a través del Escenario.

A continuación te mostrare como hacer una animación en la cual cambie de color gradualmente una forma vectorial.

Crear un documento de Propiedades ctrl. + J dimensionases de la película 300 * 300 píxeles de ancho y alto, usar como Color de fondo #FF9900 y velocidad de fotogramas 15 fps.

El total de la animación 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 píxeles 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 número 30.

Hacer clic con el botón derecho del ratón sobre la línea de tiempo en un punto entre el fotograma número 1 y el fotograma número 29, En el menú emergente seleccionar la opción de Crear interpolación de movimiento.

Seleccionar la forma dibujada del fotograma número 30 y en el Panel de Propiedades en la opción Color seleccionar Tinta y seleccionar otro color #00FFFF. Presionar ctrl. + Enter para ver la animación creada.

Espero que este ejemplo de cómo 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 solución a tu inquietud.

Curso Básico De Flash 8 (Movimiento De Formas Vectoriales) Parte 11por jmx en Animación, Dibujo, Tutoriales22 de November de 2008 12:49 pm

2

Animación De Movimiento De Formas Vectoriales

Para 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 película 500 * 150 píxeles 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 número 1, de Propiedades Color de borde #000000 y Color de relleno #FFFFFF, las dimensiones son 100.0 * 100.0 píxeles de ancho y alto. Colocar la forma vectorial dibujada en Coordenadas X: –100.0 y Y: 25.0.

Después insertar un  Fotograma clave F6 en el frame número 30.

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

Después simplemente seleccionar en la línea de tiempo un Fotograma entre el número 1 y el Fotograma número 29 y hacer clic con el botón derecho del ratón, en el menú emergente seleccionar la opción de Crear interpolación de movimiento. Presionar ctrl. + Enter y ver es como se mueve el Óvalo.

Hacer una tercera variante de interpolación de movimiento en donde forma vectorial cambia gradualmente de color y al mismo tiempo se mueve. Aquí partiremos de la animación anterior. Seleccionar la forma vectorial del fotograma 30, en el panel de Propiedades seleccionar la opción de Color Tinta

y cambiar el color #FFFF00. presionar ctrl. + Enter y ver el cambio que a sufrido la animación.

Curso Básico De Flash 8 (Edicón de Formas Vectoriales) Parte 12por jmx en Animación, Dibujo, Tutoriales22 de November de 2008 13:15 pm

0

Edición de Formas Vectoriales para la Animación.

Con frecuencia es necesario modificar las formas vectoriales y así obtener animaciones diferentes que salgan de los clásicos óvalos y rectángulo, y de esta forma imprimirle a cada una de las animaciones un toque muy personal.

A continuación 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 película 200 * 200 píxeles 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 píxeles 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 pequeña línea inclinada, cuando se toma algún extremo de que forme un ángulo en el cursor aparecerá una línea que forma una ángulo de 90 grados), inclinar estos lados un poco hasta obtener la forma más apropiada.

Cuando tengas bien definidas las curvas de la estrella, puedes hacer una animación de cambio de color. Insertar un fotograma clave F6 en el fotograma número 20.

Seleccionar un  fotograma entre el número 1 el fotograma número 19, hacer clic con el botón derecho del ratón y en el menú emergente optar por la opción de Crear interpolación de movimiento.

En el Panel de Propiedades queda establecida automáticamente la animación de movimiento, ahora hacer que la estrella cambie de color. Seleccionar la estrella del fotograma número 1 y en la opción de Color: Tinta cambiar el color a #FFFF00. Presionar ctrl. + Enter y de esta forma queda establecida una nueva animación.

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 sólidos, dibujar círculos y líneas etc. Trabajar este ejercicio en un documento de Propiedades ctrl. + J. dimensiones 300 * 300 píxeles, Color de fondo #FFFFFF y velocidad de fotogramas 12 fps.

Curso Básico De Flash 8 (Edicón De Movimiento) Parte 13por jmx en Animación, Dibujo, Manuales, Tutoriales27 de November de 2008 12:43 pm

1

Edición De Los Parámetros De Movimiento

Las formas vectoriales que involucran movimiento pueden animarse de diferente forma después de haberse creado la Interpolación de movimiento: la primera animación que se puede hacer, es que la forma vectorial gire en sentido de las

agujas del reloj (Horario) y la segunda opción es que la forma vectorial gire en sentido opuesto a las agujas del reloj (Antihorario).

En el siguiente ejemplo se trabajara sobre una Interpolación 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 píxeles, 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 Interpolación de movimiento desde el fotograma número 1 hasta el fotograma número 20, así quedara insertada una animación de movimiento.

En al capitulo anterior esta destallada la técnica para insertar una Interpolación de movimiento.

Luego de que se haya creado la animación seleccionar algún fotograma entre el 1 y el 19.

En el panel de Propiedades seleccionar la opción de Girar:Horario. También puedes manipular el número de giros en la casilla de veces (Número de rotaciones) que de la forma vectorial a lo largo de la animación, el número de vueltas va desde 1 giro hasta 65535 giros.

Practicar la animación de Interpolación de movimiento, en la que se involucra que la rotación sea en sentido Antihorario, con un Número de rotaciones de 3 y una línea de tiempo de 35 fotogramas.

Curso Básico De Flash 8 (Múltiples Animaciones) Parte 14por jmx en Animación, Dibujo, Manuales, Tutoriales27 de November de 2008 14:15 pm

1

Incorporar Múltiples Animadas A Una Película Flash

Cuando se realiza una animación 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 más fácil de hacer.

A continuación aprenderás hacer una animación de una carita feliz, con movimiento de los dos ojos por separado, esto es, que cada ojo este en una capa con una Interpolación de movimiento en cada una de ellas. aquí pondrás

en práctica todos los conocimientos adquiridos tales como: dibujar formas vectoriales, usar coordenadas, insertar fotogramas, modificar formas vectoriales, hacer animaciones de interpolación de movimiento. Crear el documento en que estará la animación.

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

La animación estará realizada en su totalidad en la Escena. En la Capa 1 seleccionar el fotograma número 1 y en el dibujar un círculo (herramienta Óvalo “letra O en el teclado”), las Propiedades del círculo son: Dimensiones 150.0 * 150.0 píxeles 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 Sólido y Color de Relleno #FFFF00.

Una vez dibujado el círculo, seleccionar el frame número 20 e insertar un fotograma F5. Insertar una segunda Capa, automáticamente se insertaran un total de 20 fotogramas, en el fotograma número 1 de esta nueva capa dibujar una Línea recta (herramienta Línea “letra N en el teclado”), las propiedades de la línea son: Dimensiones 100.0 * 0.0 píxeles 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 Sólido.

La línea dibujada representara la boca de la carita feliz. Tomar la herramienta de selección, luego colocar el cursor en el centro la línea y arrastrarla un poco hacia abajo.

Insertar una tercera Capa en ella dibujar dos círculos (herramienta Óvalo “letra O en el teclado”), las Propiedades del círculo son: Dimensiones 30.0 * 30.0 píxeles de ancho y alto, uno de los círculos colocarlo en Coordenadas X: 50.0 y Y: 70.0.

No colocar Color de Trazo al círculo y usar como Color de Relleno #000000.

Para hacer el segundo círculo basta con seleccionar el que se dibujo y Copiarlo (ctrl. + C) y después Pegarlo (ctrl. +V).

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

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

Insertar una Capa 4, dibujar en el fotograma número 1 un círculo (herramienta Óvalo “letra O en el teclado”).

Las Propiedades del círculo son: Dimensiones 10.0 * 10.0 píxeles de ancho y alto, Coordenadas X: 50.0 y Y: 80.0.

No colocar Color de Trazo al círculo y usar como Color de Relleno #FFFFFF.

Seleccionar el fotograma número 20 y convertirlo en fotograma clave con solo presionar F6. Hacer clic sobre el círculo del fotograma número 20 y colocarlo en Coordenadas X: 70.0 y Y: 80.0.

Seleccionar un fotograma entre el número 1 y el número 19 de la Capa 4, hacer clic con el botón derecho del ratón, y en el menú emergente seleccionar la opción Crear interpolación de movimiento. De esta forma el círculo en color blanco se moverá de izquierda a derecha.

Ahora hacer la animación que corresponde al ojo derecho. Insertar una quinta Capa, en el fotograma número 1 dibujar un círculo (herramienta Óvalo “letra O en el teclado”), las propiedades del círculo son:

Dimensiones 10.0 * 10.0 píxeles de ancho y alto, Coordenadas X: 120.0 y Y: 80.0.

No colocar Color de Trazo al círculo y usar como Color de Relleno #FFFFFF.

Seleccionar el fotograma número 20 y convertirlo en fotograma clave con solo presionar F6. Hacer clic sobre el círculo del fotograma número 20 y colocarlo en Coordenadas X: 140.0 y Y: 80.0.

Seleccionar un fotograma entre el número 1 y el número 19 de la Capa 5, hacer clic con el botón derecho del ratón, y en el menú emergente seleccionar la opción Crear interpolación de movimiento. De esta forma el círculo en color blanco se moverá de izquierda a derecha.

Presionar ctrl. + Enter y podrás observar la animación en todo su esplendor

Como te puedes dar cuanta la animación 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.

Después en las Capas 4 y 5 insertar un fotograma clave F6 en el frame 40.

Seleccionar el círculo de la Capa 4 el fotograma número 40 y cambiarlo a Coordenadas X: 50.0 y Y: 80.0.

Ahora seleccionar el círculo de la capa ojo derecho del fotograma número 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 número 20 y el fotograma número 39 de las Capas 4 y 5, hacer clic con el botón derecho del ratón, y en el menú emergente seleccionar la opción Crear interpolación de movimiento. Presionar ctrl. + Enter y podrás observar que existe una diferencia entre las dos animaciones.

Hasta este momento has adquirido los conocimientos para trabajar con distintas herramientas. También has trabajado con un buen número de animaciones (interpolación de movimiento), ya es tiempo de intentar hacer una animación pero esta

vez incorporando los paneles que fueron descritos en los primeros capítulos (capítulos 1 – 2 – 3).

Curso Básico De Flash 8 (Edición De Capas, Símbolos E Incorporación De Paneles) Parte 15por jmx en Animación, Dibujo, Manuales, Tutoriales13 de December de 2008 21:12 pm

1

Edición de capas

Cuando se trabaja con múltiples Capas es muy frecuente que puedas batallar para encontrar las formas que están 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 solución a este conflicto es hacer doble clic sobre el nombre de la Capa y después cambiárselo 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 línea 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.

Aplicación de símbolos e incorporación de paneles

Cuando se trabaja con animaciones un poco más elaboradas forzosamente tienes que incorporar los diferentes símbolos de Flash (Clip de película , Botón y Gráfico) así como también diferentes paneles de herramientas con los cuales te ayudaras para la realización de las animaciones, los paneles más 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 símbolos y paneles ya fueron descritos con anterioridad y ahora solamente te enfocaras en su aplicación.

Creación de símbolos de Tipo Clip de película

Cuando se diseña una animación en la que se involucre la participación de varias capas, es más recomendable hacer las animaciones en diferentes símbolos y después solamente colocar cada uno de los símbolos en la Escena para la visualización en aun archivo SWF.

La animación que a continuación se te presenta esta realizada en un documento de Propiedades ctrl. + J, dimensiones del documento 250 * 250 píxeles, color de fondo #FFFFFF y velocidad de fotogramas 12 fps.

En el siguiente ejemplo trabajaras con animaciones de interpolación de movimiento en clips de película. En esta animación estarán involucrados parámetros tales como: movimiento girar, número de giros, color alfa, color tinta.

Para crear un símbolo tienes tres opciones la primera es, seguir la siguiente ruta Insertar >> Nuevo símbolo, 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 símbolo, cambiar las propiedades, colocar un nombre que describa la acción que se estará llevando acabo en el símbolo. Luego seleccionar el Tipo de símbolo con el cual se va a trabajar. En este caso colocar como nombre cuadrado girando y seleccionar la opción Clip de película.

Una vez que te encuentres ubicado en el símbolo, 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 animación de Interpolación de movimiento.

Luego seleccionar el frame número 20 e insertar un fotograma clave F6, una vez que el fotograma clave haya sido insertado seleccionar un punto entre el fotograma número 1 y el fotograma número 19 y hacer clic sobre este

fotograma con el botón derecho del ratón, en el menú emergente seleccionar la opción Interpolación de movimiento.

Seleccionar la forma vectorial del fotograma número 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 tamaño del cuadrado se vera reducido.

Ahora seleccionar el cuadro reducido del fotograma número 20, en el Panel de Propiedades seleccionar la opción de Color: Alfa y reducir el Porcentaje de

100% a 0%. Con esta modificación la animación del cuadrado se disminuirá de tamaño y al mismo tiempo se estará desvaneciendo.

Hacer una variante más a la animación, seleccionar el cuadrado del fotograma número 1, y en el Panel de Propiedades seleccionar la casilla de Giro: Horario.

Curso Básico De Flash 8 (Interpolación De Movimiento) Parte 16por jmx en Animación, Dibujo, Manuales, Tutoriales13 de December de 2008 21:36 pm

5

Interpolación de movimiento

Practicar otro ejemplo de animación que esté contenida en la misma película FLA. En esta animación queda establecida una interpolación de movimiento de zoom, en la animación también se involucra el cambio de color alfa.

Primero debes  crear un nuevo símbolo ctrl. + F8, nombrar al símbolo óvalo girando y seleccionar la opción de Clip de película.

En este símbolo hacer una animación de un Óvalo (O), de dimensiones 40.0 * 70.0 píxeles 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 número 20 e insertar un fotograma clave F6, después seleccionar un punto entre el fotograma número 1 y el fotograma número 19 y hacer clic sobre este fotograma con el botón derecho del ratón, en el menú emergente seleccionar la opción Interpolación de movimiento.

Seleccionar la forma vectorial del fotograma número 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 número 1, en el Panel de Propiedades seleccionar la opción de Color: Alfa y reducir el Porcentaje de 100% a 0%.

Para hacer la variante de movimiento en esta animación, seleccionar el fotograma número 1, y en el Panel de Propiedades seleccionar la casilla de Giro: AntiHorario y en la casilla de Número de rotaciones escribir el número 4 veces.

Para conseguir que el óvalo cambie de su color original #00FFFF a otro cualquiera, simplemente seleccionar el óvalo del fotograma número 20 y en el Panel de Propiedades seleccionar la opción 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 símbolo cuadrado girando y colocarlo en coordenadas X: 25.0 y Y: 25.0.

Ahora arrastrar el símbolo óvalo girando hacia la Escena y colocarlo en coordenadas X: 144.4 y Y: 140.4. Cuando se hace una animación de interpolación de movimiento automáticamente se crean símbolos del Tipo Gráfico no borrar estos símbolos porque la animación se perderá irremediablemente. Presionar ctrl. + Enter y observar la animación que se ha creado.

Curso Básico De Flash 8 (Símbolos De Tipo Botón) Parte 17por jmx en Animación, Dibujo, Tutoriales18 de January de 2009 00:59 am

2

Creación de símbolos de Tipo Botón

Los símbolos del Tipo Botón son de mucha importancia en las animaciones Flash, con estos botones se puede controlar las animaciones a lo largo de la Línea de tiempo, también puedes enlazar los botones a ubicaciones web, o controlar una pagina web 100 % Flash. En este punto solamente te enfocare en conocer la Línea de tiempo del símbolo Botón, así también se trabajara en el diseño básico de un botón de tres estados Reposo, Sobre y Presionado.

El símbolo de Tipo Botón se crea igual que el símbolo Clip de película y símbolo Tipo Gráfico, esto es siguiendo la ruta Insertar >> Nuevo símbolo o presionando en el teclado ctrl. + F8 o haciendo clic en el icono que corresponde para crear un nuevo símbolo en el Panel de Biblioteca.

Luego de haber seguido uno de estos métodos en el Panel de Crear un nuevo símbolo colocar un Nombre que describa al símbolo, después simplemente seleccionar en la opción Tipo Botón. En este caso nombrar al símbolo botón redondo y en la opción Tipo seleccionar Botón.

Al Aceptar el paso anterior te colocara en el símbolo de Tipo Botón. La Línea de tiempo de este símbolo difiere en comparación a la del símbolo Clip de película y Gráfico.

La Línea de tiempo del símbolo Botón cuanta con cuatro frames, sin embargo, en esta ocasión solamente se utilizan tres de los cuatro frames estos son; Reposo, Sobre y Presionado.

En el primer fotograma Reposo, indica que el botón permanecerá en una sola posición y solamente tendrá la propiedad de ser botón en el archivo SWF.

El fotograma de Sobre indica que cuando se pasa el cursor sobre el botón este cambiara de posición o color según haya sido diseñado.

Y el estado de Presionado te indica que cuando presiones el botón este cambiara también de color o de posición. Estas tres acciones solo son visualizadas cuando el símbolo botón es puesto en la Escena y es publicado en un archivo SWF.

A continuación se diseñara un botón con borde redondeado en el símbolo que ya creaste. Presionar la herramienta rectángulo (R), luego seleccionar la herramienta de establecer Radio de esquina en el Panel emergente de Configuración de rectángulo escribir 10 como Radio de esquina.

Una vez que se estableció el Radio de esquina, colocar las propiedades al rectángulo de color. Hacer visible el Panel de Mezclador de colores shift + F9, anular el color de borde, seleccionar como color de relleno un estilo degradado de Tipo Lineal, los colores a usar son #FFFFFF y #000000.

Dibujar un rectángulo de dimensiones 100.0 * 20.0 píxeles de ancho y alto y colocarlo en coordenadas X: 0.0 y Y: 0.0.

Insertar un fotograma clave F6 en el segundo Estado de la línea de tiempo (Sobre), seleccionar la forma vectorial de este fotograma y con el Panel de Mezclador de clores aun visible cambiar el Estilo de relleno a Tipo Radial, los colores seguirán siendo #FFFFFF y #000000.

Insertar el tercer fotograma clave F6 en el fotograma Presionado, seleccionar la forma vectorial de este fotograma y con ayuda del Panel de Mezclador cambiar nuevamente el Estilo de relleno a Tipo Lineal.

Insertar una segunda capa en la cual se colocara un Campo de texto estático (T) con la palabra botón prueba, tipo de fuente Arial, tamaño de fuente 14 y color de fuente #FFFFFF, mover este texto a Coordenadas X: 6.6 y Y: 0.2.

Regresar a la Escena y arrastrar desde el Panel de Biblioteca ctrl. + L el símbolo botón redondo, presionar ctrl. + Enter y ver como trabaja el botón de tres estados.

Curso Básico De Flash 8 (Importación De Imágenes) Parte 18

por jmx en Manuales, Tutoriales18 de January de 2009 01:21 am

1

Importación de imágenes a símbolos

Las imágenes tipo gif, jpg o png son muy complicados o simplemente imposible de generar en Flash, porque el programa de Flash es básicamente para generar animaciones. Cuando se quiere trabajar con animaciones que contengan algún tipo de imágenes. Puedes ayudarte de la herramienta Importar imágenes, es muy recomendable primero crear un símbolo de tipo Gráfico y luego sobre este símbolo Importar la imagen en cuestión. Para hacer una animación que involucre movimiento, desvanecimiento, etc, después es necesario crear un nuevo símbolo de tipo Clip de película e insertar en este el símbolo tipo Grafico.

Hay dos métodos con los cuales te puedes ayudar para importar imágenes la primera es seguir la ruta Archivo >> Importar y luego seleccionar una de las dos opciones presentadas Importar a escenario o Importar a biblioteca, una recomendación es que no importes a biblioteca, es mejor importar directamente al símbolo en el cual se va a trabajar la ruta es Archivo >> Importar >> Importar a escenario o simplemente presionar en el teclado ctrl. + R.

Luego de haber presionada la opción de Importar, navegar hasta la carpeta en la cual este contenida la imagen que quieras importar.

Después seleccionar la imagen deseada y Acepar, con esto la imagen será trasladada hasta el símbolo creado.

Curso Básico De Flash 8 (Animación Con Imágenes Importadas) Parte 19

por jmx en Animación, Tutoriales7 de February de 2009 21:28 pm

0

Animación Con Imanes Importadas

En este ejemplo se trabajara en la animación de una imagen con color Alfa para simular el desvanecimiento de imagen.

La animación estará insertada en un documento con las siguientes Propiedades ctrl. J, dimensiones del documento 300 * 300 píxeles de ancho y alto, color de fondo #FFFFFF y velocidad de fotogramas 15 fps

La animación no se trabajara con Interpolación de movimiento porque este tipo de interpolación genera automáticamente dos símbolos de Tipo Gráfico y hace un poco pesado el archivo FLA, mejor se trabajara con una animación de Movimiento en el Panel de Propiedades. Esta animación será descrita a continuación. Primero crear un  símbolo ctrl. + F8 llamarlo imagen seleccionar la opción de Tipo Gráfico.

Ubicado en el símbolo presionar ctrl. + R en el menú emergente de Importar navegar hasta la carpeta de la imagen. Cuando la imagen haya sido insertada en el símbolo imagen clocarla en coordenadas X: 0.0 y Y: 0.0. Importar una imagen que tenga de dimensiones 300.0 * 300.0 píxeles de ancho y alto.

Ahora crear un nuevo símbolo ctrl. F8 y nombrarlo animación de imagen, en la opción Tipo seleccionar la opción de Clip de película.

Una vez que te encuentres en el símbolo de Clip de película hacer visible el Panel de Biblioteca ctrl. + L y arrastrar desde esta el símbolo imagen hacia el Clip de película, color la imagen en coordenadas X: 0.0 y Y: 0.0.

Seleccionar el frame número 25 e insertar un fotograma clave F6. Seleccionar la imagen de este fotograma y en el Panel de Propiedades seleccionar la opción Color Alfa y después reducir el porcentaje de 100% a 0%.

Seleccionar un  fotograma entre el número 1 y el número 24, en el Panel de Propiedades seleccionar la opción Animar Movimiento, y de esta forma quedara insertada la animación.

Regresar a la Escena y arrastrar desde la Biblioteca ctrl. + L el símbolo animación de imagen, colocar el símbolo en coordenadas X: 0.0 y Y: 0.0. Presionar ctrl. + Enter y visualizar el trabajo realizado.

Como veras la animación tiene un pequeño salto, para solucionar este problema regresar al símbolo animación de imagen y colocar un fotograma clave F6 en el frame número 50, seleccionar la imanen de este fotograma en el Panel de Propiedades seleccionar Color Ninguno.

Seleccionar un  fotograma entre el número 25 y el número 49, en el Panel de Propiedades seleccionar la opción Animar Movimiento, y de esta forma quedara insertada una animación más.

Volver a presionar ctrl. + Enter y notaras una significativa diferencia en la animación.

Curso Básico De Flash 8 (Animación De Formas Vectoriales) Parte 20por jmx en Animación, Dibujo, Tutoriales7 de February de 2009 21:45 pm

8

Animación de formas vectoriales en símbolos (no interpolación de movimiento)

No siempre animar formas vectoriales con Interpolación de movimiento es la técnica más apropiada, la primera de las razones es porque tienes que trabajar con dos símbolos de Tipo Gráfico por cada animación que se realiza, y a estas animaciones solamente se puede trabajar con el cambio de color en cualquiera de sus modalidades. Por otro lado cuando quieres hacer una animación en la que se involucre

una deformación y al mismo tiempo un cambio de color de una forma vectorial es imposible hacerla con una animación de Interpolación de movimiento, para este tipo de animaciones se utiliza una Animación de Forma en el Panel de Propiedades.

A continuación se te guiara paso a paso hasta llegar a conseguir una animación en la se involucre el cambio de color, la deformación de la forma vectorial y después hacer que la forma vectorial se traslade de un lugar a otro.

Crear un documento de Propiedades ctrl. + J, dimensiones 500 * 200 píxeles de ancho y alto, color de fondo #CCFFFF y velocidad de fotogramas 15 fps.

Luego de que hayas colocado las propiedades del documento, crear un símbolo ctrl. + F8, nombrarlo animación de forma, en la opción de Tipo seleccionar Clip de película.

Ubicado en el símbolo dibujar un Óvalo (O) que no tenga borde y usar como color de relleno #000066 las dimensiones 98.0 * 198.0 píxeles de ancho y alto, colocar la forma dibujada en coordenadas X: 0.0 y Y: 0.0.

Insertar un fotograma clave F6 en el frame número 25. seleccionar el óvalo de este nuevo fotograma y cambiar el color de relleno a #FF0000.

Seleccionar un fotograma entre el número 1 y el número 24. En el Panel de Propiedades seleccionar la opción de Animar: Forma.

Regresar a la Escena y arrastrar desde el Panel de Biblioteca ctrl. + L el símbolo animación de forma, después colocar el símbolo en coordenadas X: 0.0 y Y: 0.0. Presionar ctrl. + Enter y observar como cambia de color gradualmente el óvalo.

Regresar al símbolo animación de forma asiendo doble clic sobre el icono que representa al símbolo en el Panel de la Biblioteca.

Nuevamente ubicado en el símbolo animación de forma, seleccionar la forma vectorial del fotograma número 25, tomar por uno de los extremos a la forma y deformarla un poco. Las coordenadas cambiaran al deformar el óvalo, si deseas puedes colocar nuevamente la forma vectorial en coordenadas X: 0.0 y Y: 0.0. Presionar una vez más ctrl. + Enter y ahora se observara que el óvalo cambia de color y al mismo tiempo este se va deformado en otra cosa.

Para concluir con este objetivo regresar otra vez al símbolo animación de forma luego seleccionar el la forma vectorial del fotograma número 25 y cambiarla de coordenadas en el eje X, la nueva coordenada será X: 500.0. Con esta coordenada te aseguraras que la animación se trasladara hasta a fuera del Escenario.

Presionar ctrl. + Enter y ver como queda la animación final en la cual están incluidas tres tipos de animaciones.

Curso Básico De Flash 8 (Guías De Movimiento) Parte 21por jmx en Animación, Manuales, Tutoriales20 de February de 2009 21:57 pm

5

Animación con guías de movimiento

Otro tipo de animación que se puede obtener con el programa de Flash, es una animación que siga un patrón que sirva de guía a una forma vectorial o una imagen. En el siguiente ejemplo aprenderás a crear una animación introduciendo una capa de Guía de movimiento, además aprenderás a usar la Herramienta de Dibujo de objeto que es una forma diferente de agrupar una forma vectorial en sus partes de borde y color de relleno.

Crear un documento de Propiedades ctrl. + J, las dimensiones son  500 * 200 píxeles de ancho y alto, colocar como color de fondo #000000 y velocidad de fotogramas 12 fps.

Esta animación es llevara acabo en su totalidad en la Escena. Primero, presionar por dos segundos la herramienta de Rectángulo hasta obtener el submenú de la Herramienta de PolyStar.

En el Panel de Propiedades seleccionar el color de borde #0000FF y color de relleno #FFFF00. Hacer clic en la casilla de Opciones, y después en el Panel

de Configuración de herramientas seleccionar el Estilo de Estrella y Número de lados 5.

Después de haber seleccionado las propiedades de la forma vectorial a dibujar, presionar el icono de Dibujo de objeto en el panel de herramientas o simplemente presionar la letra J en el teclado, así la forma vectorial quedara automáticamente agrupada. Si el dibujo no esta agrupado o insertado en un símbolo de cualquier Tipo la animación con Guía de movimiento no tendrá éxito.

Ahora dibujar la estrella de 5 lados, de dimensiones 90.0 * 85.5 píxeles de ancho y alto, colocar la estrella en cualquier lugar por el momento las coordenadas no tienen importancia. Una vez que hayas terminado de dibujar la estrella aparecerá alrededor de esta un margen en color azul esto indica que el dibujo esta agrupado. En el Panel de Propiedades aparecerá la leyenda de Objeto de dibujo esta leyenda confirma también que la forma vectorial a sido agrupada.

Seleccionar el frame número 65 en la Línea de tiempo y en el insertar un fotograma clave F6. Seleccionar la estrella de este fotograma y moverla a un punto de coordenadas diferente al original.

Seleccionar un fotograma entre el número 1 y el número 64, en el panel de Propiedades seleccionar las opciones de Animar Movimiento, Girar Horario y 10 veces. Hasta este punto esta creada una animación de una forma vectorial que se trasladara girando de un punto a otro dependiendo de donde hayas colocado la estrella del fotograma número 1 y la estrella del fotograma número 65. En los pasos siguientes trazaras una ruta por donde se trasladará la forma vectorial.

A continuación inserta una Capa de Guía de movimiento, en esta capa automáticamente se insertaran 65 fotogramas.

Recuerda que tienes seleccionada la opción de Dibujo de objeto, lo más recomendable es que quites esta selección presionando en el teclado la letra J. Con ayuda de la herramienta de Lápiz Y, Pincel B o Pluma P, trazar una guía por toda la Escena.

Seleccionar la herramienta de Ajustar a objetos para que cuanto acerques un poco la estrella al inicio de la guía esta tengan una atracción magnética.

Cuando termines de trazar la guía seleccionar la estrella del fotograma número 1, tomar esta estrella por el centro y en ella aparecerá automáticamente un círculo en el centro. Luego que tienes tomada por el centro a la estrella, moverla hasta la parte en donde inicia la guía.

Ahora seleccionar la estrella del fotograma número 65, tomarla por el centro y moverla hasta la parte en donde finaliza la guía. Presionar ctrl. + Enter y ver como la estrella hace el recorrido que trazaste por toda la Escena.

Curso Básico De Flash 8 (Animación Con Máscaras) Parte 22por jmx en Animación, Dibujo, Manuales, Tutoriales21 de February de 2009 07:00 am

16

Animación con máscaras convertidas

Las animaciones que involucran la intervención de capas convertidas en máscaras, son de suma importancia en animaciones básicas tanto de forma como de movimiento. Las animaciones de máscaras muestran solamente una parte de una imagen, texto  o forma vectorial. En el ejemplo que a continuación se te presenta trabajaras con una combinación de animaciones de movimiento y forma en una misma capa, posteriormente esta capa será transformada en una capa de máscara. La capa máscara estará aplicara a una imagen importada a la Escena.

El total de la animación como en el caso anterior se trabajara en la Escena. Crear un documento de Propiedades ctrl. + J, las dimensiones son 500 * 400 píxeles de ancho y alto, color de fondo #FFFFFF, velocidad de fotogramas 12 fps.

A la primera capa de la Escena cambiarle el nombre por el de imagen. Después importar ctrl. + R una imagen de dimensiones 500 * 400 píxeles de ancho y alto, colocar la imagen importada en coordinadas X: 0.0 y Y: 0.0.

Insertar una segunda capa y cambiarle el nombre a esta por el de máscara. Aquí es en donde se trabajara propiamente con la combinación animada de movimiento y forma. Dibujar en el primer fotograma un Rectángulo R, presionar el icono de Dibujo de objeto o simplemente la letra J en el teclado. El rectángulo carecerá de borde y no importa el color de relleno porque este no se observara en la presentación del archivo swf final. Las dimensiones son 40 * 400 píxeles de ancho y alto. Colocar esta forma vectorial en coordenada X: -40.0 y Y: 0.0.

Seleccionar el frame número 20 e insertar un fotograma clave F6. Seleccionar el rectángulo de este fotograma y cambiarlo a nuevas coordenadas X: 500.0 y Y: 0.0.

Seleccionar un fotograma entre el número 1 y el número 19, en el Panel de Propiedades seleccionar la opción Animar Movimiento.

Insertar un fotograma clave F6 en el frame número 40, seleccionar el rectángulo de este fotograma y luego cambiar las dimensiones a 500.0 * 400.0 píxeles y las nuevas coordenadas son X: 0.0 y Y: 0.0.

Crear ahora la animación de tipo Forma, seleccionar un fotograma entre el número 20 y el número 39. en el panel de Propiedades seleccionar la opción de Animar Forma. De esta forma el rectángulo crecerá hasta cubrir por completo la imagen.

Para finalizar la animación insertar un fotograma clave F6 pero ahora en el frame número 60. Seleccionar el rectángulo del fotograma 60 y cambiarlo a coordenadas X: -500.0 y Y: 0.0.

Seleccionar un fotograma entre el número 40 y el número 59. En el Panel de Propiedades optar por la opción Animar Movimiento, con esta animación el rectángulo se desplazara al lado izquierdo y al mismo tiempo la imagen se estará ocultando.

Lo único que falta por hacer es transformar la capa en donde esta insertada la animación a Capa de tipo máscara. Hacer clic con el botón derecho del ratón sobre la capa máscara, en el menú emergente seleccionar la opción de Máscara.

Cuando cambias una capa a la opción de máscara los iconos de estas cambian a un color y de aspecto. Finalmente insertar un fotograma F5 en el frame número 60 de la capa imagen. Ahora ya esta lista la animación y puedes presionar sin ningún inconveniente ctrl. + Enter y ver como trabaja la animación final.

Hasta aquí quedan concluidas las explicaciones sobre las Herramientas Básicas de trabajo en Macromedia Flash 8, también se dan por concluido las Animaciones Básicas que NO involucran Código ActionScript.