SlideShare una empresa de Scribd logo
1 de 7
Descargar para leer sin conexión
Guía de aprendizaje de Flash CS5
Tutorial 1. Creación de una ilustración vectorial
Paso 1 de 14
Esta es la pantalla de bienvenida que aparece al
ejecutar Flash. En esta pantalla tenemos seis áreas
principales:
Crear con plantilla. Abre un nuevo archivo a
partir de una plantilla.
Abrir un elemento reciente. Acceso directo a
archivos recientes y opción Abrir para buscar
otros archivos.
Crear nuevo. Creación de un documento nuevo
de Flash del tipo que seleccionemos. Para
comenzar seleccionaremos Crear nuevo >
ActionScript 3.0.
Ampliar. Vínculo a Flash Exchange, un sitio de
intercambio de recursos.
Aprendizaje. Enlaces a diferentes tutoriales sobre
Flash CS5.
Puesta en marcha, Nuevas funciones,
Desarrolladores y Diseñadores. Vínculos a sitios
de ayuda de Flash.
Paso 2 de 14
En Flash CS5 podemos elegir entre varios
espacios de trabajo, así como crear nuestro
espacio de trabajo personalizado.
Cada espacio de trabajo tiene una distribución
diferente de las diferentes áreas, y puede mostrar
por defecto unos paneles u otros.
Podemos cambiar a diferentes espacios de trabajo
seleccionando en el desplegable, situado en la
parte superior al lado del buscador, el espacio de
trabajo que queramos.
En esta guía trabajaremos con el espacio de
trabajo llamado Conceptos básicos.
Paso 3 de 14
Generalmente, el primer paso que haremos al trabajar con un archivo Flash es configurar las características
principales de la película.
Podemos ver las características de nuestra película en el inspector de Propiedades. Si no vemos este
panel, pulsaremos sobre el menú Ventana > Propiedades*.
Si en este panel vemos otros datos que no corresponden con la imagen, seleccionaremos la herramienta
Selección pulsando sobre la flecha superior de la barra de herramientas o bien pulsando la tecla de acceso
directo V. Este acceso directo puede ser muy útil, ya que es una de las herramientas que más utilizaremos.
Con la herramienta Selección, pulsaremos sobre un lugar vacío del escenario para asegurar que no haya
nada seleccionado.
En la parte superior de este panel vemos el título de documento. Después está el área Publicar, de la que
hablaremos en otros tutoriales. Después nos encontramos con el área de Propiedades, en la que nos
centraremos a continuación. Por último está la nueva área Historial del swf, en la que podremos ver algunos
datos sobre los archivos swf que vayamos publicando.
Dentro del área Propiedades, FPS muestra los fotogramas por segundo a los que está configurada la
película. A mayor número de FPS, mayor velocidad y fluidez de la animación. Para algunas animaciones
puede ser suficiente un valor de 12 o 18 FPS, pero de momento dejamos este valor en 24 fotogramas por
segundo.
Después tenemos el tamaño del escenario. Si queremos cambiar este valor, pulsaremos sobre el botón
Editar que tenemos a su lado. Para este tutorial no vamos a modificar el tamaño.
Escenario muestra el color de fondo de nuestra película. Vamos a cambiar el color de fondo pulsando sobre
el cuadro de color y seleccionando un color azulado, tal y como se puede ver en este vídeo.
*Siempre que un panel no está visible, podemos abrirlo haciendo clic en su nombre desde el menú Ventana.
Paso 4 de 14
Para comenzar vamos a dibujar una nube trazando varios círculos superpuestos.
En primer lugar seleccionaremos la herramienta Óvalo, que se encuentra agrupada junto con la
herramienta Rectángulo. Todas las herramientas que tienen otras herramientas agrupadas muestran en
la barra de herramientas una pequeña flecha negra. Manteniendo pulsada la herramienta
correspondiente podemos acceder al resto de herramientas que están agrupadas junto a ella.
Una vez seleccionada la herramienta Óvalo, el inspector de Propiedades mostrará atributos
relacionados con esta herramienta. Lo único que vamos a asegurar de momento es que el trazo sea
negro y el relleno blanco. De no serlo, pulsaremos sobre el cuadro de color correspondiente para
cambiarlo. Estos valores también se pueden cambiar directamente desde el panel de Herramientas. El
trazo se refiere al color del perfil del objeto, y el relleno al color que muestra en su interior.
Las Opciones de óvalo sólo pueden modificarse antes de dibujar el óvalo, salvo que hubiéramos
elegido la herramienta Óvalo simple, en cuyo caso podríamos modificar estos valores después de
haber dibujado el objeto. Sin embargo, con Óvalo simple el objeto permanece agrupado e
independiente, por lo que no se combina con otras formas al superponerse. Entre Rectángulo y
Rectángulo simple existen estas mismas diferencias.
En este caso vamos a superponer y combinar varios círculos, por lo que hemos elegido la herramienta
Óvalo.
Dibujo de objeto, un modificador que aparecerá en la parte
inferior de la barra de Herramientas, deberá estar también
desactivado, ya que de lo contrario la forma creada también
permanecerá agrupada y, por tanto, no la podremos combinar
con otras formas.
Desactivaremos también el modificador Ajustar a objetos para tener una
mayor libertad a la hora de crear las formas ovaladas y situar los círculos
que dibujemos. Por ejemplo, si este modificador está activado, los óvalos
casi redondos se convertirán en círculos perfectos, lo cual en este caso no
nos interesa.
Ahora dibujaremos una nube situándola en la esquina superior izquierda del
escenario.
Con la herramienta Óvalo
seleccionada, dibujamos cuatro
óvalos en el escenario de forma
similar a como se muestra en el
vídeo.
Después, con la herramienta
Selección (la flecha superior de la
barra de herramientas, que también
se puede activar pulsando la tecla
V), hacemos clic sobre alguno de
los trazos negros. Como podremos
ver, quedará seleccionado un tramo
del trazo, ya que los óvalos se han combinado para formar ahora un solo
dibujo. Eliminamos el trazo seleccionado pulsando la tecla Supr.
Podemos eliminar el resto de los trazos de la misma manera, es decir,
seleccionando cada tramo y borrándolo con la tecla Supr. Sin embargo,
como todos los trazos se encuentran unidos por algún punto, una forma
más rápida de borrarlos es haciendo doble clic sobre cualquier trazo, y
con ello quedarán seleccionados todos los trazos que estén unidos. De
esta forma, al pulsar la tecla Supr se borrarán todos los trazos
seleccionados.
Si observamos la línea de tiempo, podemos ver que ahora el primer
fotograma de la Capa 1 tiene un punto negro sobre un fondo gris, lo que
indica que nuestro dibujo ha quedado incluido en este fotograma.
Las capas, además de definir el orden de apilamiento de los distintos
elementos que tengamos en el escenario, también son una buena forma de
organizar y mantener independientes las diferentes partes de una
ilustración. Es por tanto muy recomendable crear una capa diferente para
cada elemento.
En primer lugar renombramos la capa actual como cloud haciendo doble
clic sobre su nombre. Para evitar modificar su contenido accidentalmente,
la bloqueamos haciendo clic sobre el punto que hay bajo el candado.
Por último, crearemos una nueva capa. Si seleccionamos esta nueva
capa, un pequeño lápiz junto a su nombre indicará que se encuentra activa.
Antes de continuar, guardad el archivo con el nombre tutorial1.fla
seleccionando Archivo > Guardar. Es conveniente que nos
acostumbremos a guardar el archivo regularmente a medida que vayamos
avanzando con el tutorial.
Paso 5 de 14
Paso 6 de 14
Vamos a dibujar un pájaro con las alas extendidas, comenzando por el
cuerpo.
En primer lugar vamos a asignar que no haya trazo (representado por un
rectángulo blanco con una franja roja) y un color de relleno negro. Esta vez
cambiaremos los colores en la propia barra de herramientas. El resultado
es el mismo que si lo hacemos en el inspector de Propiedades.
Una de las formas más sencillas de comenzar a dibujar es empezar
dibujando formas básicas, como por ejemplo óvalos o rectángulos, y
modificando después esas formas con la herramienta Selección. Vamos a
dibujar el pájaro de esta forma.
Para crear el cuerpo del pájaro,
dibujaremos una forma ovalada con la
herramienta Óvalo.
Después modificaremos el óvalo con la
herramienta Selección (V) hasta
conseguir una forma acampanada
similar a la del vídeo.
Cuando acercamos el puntero a una forma con la herramienta
Selección, el puntero cambia para indicar el tipo de modificación
que se puede realizar en la línea o el relleno: si aparece una
esquina podremos modificar un extremo, si aparece una curva
podremos ajustar una curva, y si aparece una cruz podremos
desplazar el objeto.
Siempre que queramos hacer una de estas modificaciones
tendremos que hacer clic cuando el puntero adopte la forma que
busquemos y arrastrar hasta el lugar deseado.
En este caso, situándonos en el borde del óvalo, sólo aparecía la forma
curvada, ya que al tratarse de una forma ovalada no hay ninguna esquina.
De forma similar a como hicimos en el
paso 6, llamaremos body a la capa
actual, la bloquearemos, y crearemos
una nueva capa llamada wings.
Para dibujar el ala utilizaremos la herramienta Rectángulo, y
posteriormente modificaremos la forma creada con la herramienta
Selección. Como podemos ver en el vídeo, en este caso sí que podemos modificar
tanto esquinas como curvas. La forma del puntero ayuda a encontrar las
diferentes curvas y esquinas incluso en el área en la que se superponen
ambas formas negras (alas y cuerpo).
Por ahora nos interesa que el ala se muestre totalmente extendida aunque
quede menos realista. Más adelante, en los tutoriales de animación, la
doblaremos y moveremos convenientemente.
El ala izquierda la haremos a partir de una copia del ala derecha.
Normalmente, cuando vayamos a reutilizar un objeto, lo más adecuado es
convertirlo previamente en símbolo. Sin embargo, para este primer tutorial
vamos a copiar y pegar el ala directamente, sin convertirla en símbolo. El
uso de los símbolos lo estudiaremos en el próximo tutorial.
Paso 7 de 14
Paso 8 de 14
Vamos a trabajar con el panel Alinear, que podemos abrir
pulsando sobre su icono o bien seleccionando Ventana >
Alinear.
En Flash podemos colocar los paneles en el lugar que nos
resulte más cómodo, pudiendo personalizar de esta forma
nuestro espacio de trabajo según nuestras necesidades.
También es posible agrupar los paneles junto con otras áreas
del espacio de trabajo.
Si en cualquier momento queremos volver al espacio de
trabajo por defecto, seleccionaremos Restablecer
'Conceptos básicos' en el desplegable del espacio de trabajo.
Volviendo a nuestro pájaro, vamos en primer lugar a alinear las alas con
ayuda del panel Alinear.
Seleccionamos las dos alas haciendo clic sobre ellas con la herramienta
Selección. Para hacer una selección múltiple deberemos mantener pulsada
la tecla Mayúsculas.
Abrimos el panel Alinear. Lo primero que debemos hacer es desactivar la
casilla Alinear en escenario si estuviera seleccionada , ya que de lo
contrario los elementos no se alinearán entre sí, sino respecto al
escenario.
Con ambas alas seleccionadas hacemos clic en Alinear borde superior.
Desbloqueamos la capa del cuerpo del pájaro para poder seleccionarlo, y
con los tres elementos seleccionados (el cuerpo y las alas), abrimos de
nuevo el panel Alinear y hacemos clic en Distribuir horizontalmente
respecto al centro.
Paso 9 de 14
Hacemos clic sobre el ala con el botón derecho del ratón y
seleccionamos Copiar del menú contextual.
Después, sobre algún lugar vacío del escenario, hacemos clic de
nuevo con el botón derecho del ratón y seleccionamos Pegar.
Con la copia del ala seleccionada, seleccionamos Modificar >
Transformar > Voltear horizontalmente.
Hacemos clic sobre el ala y la arrastramos hasta una posición
aproximada a su ubicación final. En el siguiente paso, con ayuda del
panel Alinear, la colocaremos en su posición definitiva.
Paso 10 de 14
Para una mejor organización de los elementos de una película, podemos
agrupar las capas en carpetas.
Vamos a crear en la línea de tiempo una nueva carpeta llamada bird que
incluirá las capas wings y body. Para ello, después de crear la carpeta,
arrastraremos las capas a su interior.
Al bloquear la carpeta podemos observar que se bloquean todas las capas
que contiene.
Después crearemos una nueva capa para añadir más elementos al
escenario.
Recordemos guardar regularmente nuestro trabajo con Archivo >
Guardar.
Vamos a hacer una pequeña aproximación a otras dos
herramientas vectoriales de Flash, comenzando por la
herramienta Lápiz.
Al activar el lápiz, veremos que en el inspector de Propiedades
el relleno aparece automáticamente con una franja roja que
significa que no hay relleno, ya que el lápiz sólo puede dibujar
trazos. Seleccionaremos un color negro para el trazo, y un
grosor de 3 píxeles.
En la parte inferior de la barra de herramientas
aparecerán los modificadores asociados a la
herramienta lápiz.
Vamos a tratar de dibujar algunos pájaros con
estos tres modificadores.
El modificador Enderezar convierte las
líneas en rectas o en figuras
geométricas comunes.
El modificador Suavizar dibuja curvas
suaves.
El modificador Tinta dibuja curvas a
mano alzada, sin aplicar ninguna
modificación.
Una vez dibujada una forma, sea con estas o con otras
herramientas, siempre podrá ser suavizada o enderezada
haciendo clic repetidamente en los modificadores Suavizar y
Enderezar que aparecerán al seleccionar una forma en el
escenario.
Paso 11 de 14
Paso 12 de 14
Por último vamos a utilizar la herramienta Pincel.
En la parte inferior de la barra de herramientas aparecerán los
modificadores asociados a la herramienta Pincel.
Los dos modificadores inferiores se refieren al tamaño y la
forma del pincel. Vamos a seleccionar como forma del pincel
una forma ovalada vertical.
El dibujo realizado con el pincel queda
generalmente suavizado, por lo que es
una buena herramienta para hacer este
tipo de dibujos.
A diferencia del lápiz, el pincel pinta
rellenos, y no trazos. Por tanto, el dibujo
realizado con el pincel puede ser
modificado como un relleno.
Si se tiene una tableta
sensible a la presión
aparecerán dos nuevos
modificadores, el modificador
Presión y el modificador
Inclinación. Si se activan
estos modificadores podremos variar la
anchura y la inclinación de los trazos del
pincel dependiendo de la presión e
inclinación que ejerzamos con nuestro
lápiz.
Los pájaros de estos dos últimos pasos los hemos dibujado solamente
para experimentar con la herramienta lápiz y la herramienta pincel, pero el
primer pájaro y la nube los utilizaremos en posteriores tutoriales sobre
animación, así que es muy importante que guardéis vuestro trabajo. Para
ello selecciona Archivo > Guardar o Ctrl+S.
Para complementar los conceptos desarrollados en este tutorial, se
recomienda hacer las siguientes actividades:
Dibuja otra nube y modifica después su forma con la herramienta
Selección.
1.
Modifica también la forma de los pájaros que hemos creado con el
lápiz y con el pincel para comprender mejor las diferencias entre estas
dos herramientas.
2.
Crea una forma nueva partiendo de un óvalo o de un rectángulo.3.
Paso 13 de 14
Paso 14 de 14

Más contenido relacionado

La actualidad más candente

Presentacion De Photoshop
Presentacion De PhotoshopPresentacion De Photoshop
Presentacion De Photoshopguestf223b3
 
Manual de Practicas Photoshop
Manual de Practicas PhotoshopManual de Practicas Photoshop
Manual de Practicas PhotoshopAlincita Simon
 
Photoshop. Edición de Imágenes
Photoshop. Edición de ImágenesPhotoshop. Edición de Imágenes
Photoshop. Edición de ImágenesPancho Opcionweb
 
Manual de actividades de PhotoShop
Manual de actividades de PhotoShopManual de actividades de PhotoShop
Manual de actividades de PhotoShopale_martinez_19
 
Guia de ejercicios flash novenos
Guia de ejercicios flash novenosGuia de ejercicios flash novenos
Guia de ejercicios flash novenospvyinna
 
Ejercicios paso a paso
Ejercicios paso a pasoEjercicios paso a paso
Ejercicios paso a pasoNIkoo Triana
 
Cómo modificar el tamaño del lienzo en en Photoshop
Cómo modificar el tamaño del lienzo en en PhotoshopCómo modificar el tamaño del lienzo en en Photoshop
Cómo modificar el tamaño del lienzo en en PhotoshopComoUsarPhotoshop
 
Manual illustrator cs3 angela elvecio agosto 6 2011
Manual illustrator cs3 angela elvecio agosto 6 2011Manual illustrator cs3 angela elvecio agosto 6 2011
Manual illustrator cs3 angela elvecio agosto 6 2011Angela Maria Herrera Viteri
 
Manual de prácticas de photoshop
Manual de prácticas de photoshopManual de prácticas de photoshop
Manual de prácticas de photoshopLa Qrazii Luniitha
 
Tutorial illustrator
Tutorial illustratorTutorial illustrator
Tutorial illustratorMarli Moña
 
Blender digital sculpting - Pierre Schiler
Blender digital sculpting - Pierre SchilerBlender digital sculpting - Pierre Schiler
Blender digital sculpting - Pierre SchilerPierre Schiller
 
Manual de practicas photoshop cs4 (1)
Manual de practicas photoshop cs4 (1)Manual de practicas photoshop cs4 (1)
Manual de practicas photoshop cs4 (1)Nayely Mejia
 

La actualidad más candente (20)

Presentacion De Photoshop
Presentacion De PhotoshopPresentacion De Photoshop
Presentacion De Photoshop
 
Capacitación del curso de mantenimiento
Capacitación del curso de mantenimientoCapacitación del curso de mantenimiento
Capacitación del curso de mantenimiento
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
Manual de Practicas Photoshop
Manual de Practicas PhotoshopManual de Practicas Photoshop
Manual de Practicas Photoshop
 
Manual de Practicas de Photoshop
Manual de Practicas de PhotoshopManual de Practicas de Photoshop
Manual de Practicas de Photoshop
 
Photoshop. Edición de Imágenes
Photoshop. Edición de ImágenesPhotoshop. Edición de Imágenes
Photoshop. Edición de Imágenes
 
Manual de actividades de PhotoShop
Manual de actividades de PhotoShopManual de actividades de PhotoShop
Manual de actividades de PhotoShop
 
Manual photoshop unasam - cociap 2011
Manual photoshop unasam - cociap 2011Manual photoshop unasam - cociap 2011
Manual photoshop unasam - cociap 2011
 
Guia de ejercicios flash novenos
Guia de ejercicios flash novenosGuia de ejercicios flash novenos
Guia de ejercicios flash novenos
 
Macromedia flash 8
Macromedia flash 8Macromedia flash 8
Macromedia flash 8
 
Trabajo unidades 15-15
Trabajo unidades 15-15Trabajo unidades 15-15
Trabajo unidades 15-15
 
Ejercicios paso a paso
Ejercicios paso a pasoEjercicios paso a paso
Ejercicios paso a paso
 
Cómo modificar el tamaño del lienzo en en Photoshop
Cómo modificar el tamaño del lienzo en en PhotoshopCómo modificar el tamaño del lienzo en en Photoshop
Cómo modificar el tamaño del lienzo en en Photoshop
 
Manual illustrator cs3 angela elvecio agosto 6 2011
Manual illustrator cs3 angela elvecio agosto 6 2011Manual illustrator cs3 angela elvecio agosto 6 2011
Manual illustrator cs3 angela elvecio agosto 6 2011
 
Manual de prácticas de photoshop
Manual de prácticas de photoshopManual de prácticas de photoshop
Manual de prácticas de photoshop
 
Tutorial illustrator
Tutorial illustratorTutorial illustrator
Tutorial illustrator
 
Tutorial illustrator
Tutorial illustratorTutorial illustrator
Tutorial illustrator
 
Blender digital sculpting - Pierre Schiler
Blender digital sculpting - Pierre SchilerBlender digital sculpting - Pierre Schiler
Blender digital sculpting - Pierre Schiler
 
Manual de practicas photoshop cs4 (1)
Manual de practicas photoshop cs4 (1)Manual de practicas photoshop cs4 (1)
Manual de practicas photoshop cs4 (1)
 
PHOTOSHOP CS6: Formas y texto
PHOTOSHOP CS6: Formas y textoPHOTOSHOP CS6: Formas y texto
PHOTOSHOP CS6: Formas y texto
 

Destacado

Presentación1
Presentación1Presentación1
Presentación1cortesjj
 
Programación III - Consignas tp 04
Programación III - Consignas tp 04 Programación III - Consignas tp 04
Programación III - Consignas tp 04 MultimediaUNLaR
 
Programación III. Nieva. Clase 3
Programación III. Nieva. Clase 3Programación III. Nieva. Clase 3
Programación III. Nieva. Clase 3MultimediaUNLaR
 
Programacion.con.adobe.action.script.3.0
Programacion.con.adobe.action.script.3.0Programacion.con.adobe.action.script.3.0
Programacion.con.adobe.action.script.3.0KathaBCN
 
Presentacion flash cs5
Presentacion flash cs5Presentacion flash cs5
Presentacion flash cs5cristian31bb
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3Lina2397
 
Animaciones flash
Animaciones flashAnimaciones flash
Animaciones flashalexsan123
 
Flash professional cs5
Flash professional cs5Flash professional cs5
Flash professional cs590000111
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3Lina2397
 
Silabo 3er año 2015 - computo
Silabo 3er año   2015 - computoSilabo 3er año   2015 - computo
Silabo 3er año 2015 - computolisseth_anyosa
 
Silabo 4to año 2015-computo
Silabo 4to año  2015-computoSilabo 4to año  2015-computo
Silabo 4to año 2015-computolisseth_anyosa
 
SilaboSyllabus de dreamweaver
SilaboSyllabus de dreamweaverSilaboSyllabus de dreamweaver
SilaboSyllabus de dreamweaverMilton-2 Palomino
 
Crossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flashCrossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flashJorge Cantú López
 
Silabo 5to año 2015-computo
Silabo 5to año 2015-computoSilabo 5to año 2015-computo
Silabo 5to año 2015-computolisseth_anyosa
 

Destacado (20)

Presentación1
Presentación1Presentación1
Presentación1
 
Flash cs5
Flash cs5Flash cs5
Flash cs5
 
Programación III - Consignas tp 04
Programación III - Consignas tp 04 Programación III - Consignas tp 04
Programación III - Consignas tp 04
 
Flash taller 2
Flash taller 2Flash taller 2
Flash taller 2
 
Programación III. Nieva. Clase 3
Programación III. Nieva. Clase 3Programación III. Nieva. Clase 3
Programación III. Nieva. Clase 3
 
Programacion.con.adobe.action.script.3.0
Programacion.con.adobe.action.script.3.0Programacion.con.adobe.action.script.3.0
Programacion.con.adobe.action.script.3.0
 
Presentacion flash cs5
Presentacion flash cs5Presentacion flash cs5
Presentacion flash cs5
 
Flash taller 5
Flash taller 5Flash taller 5
Flash taller 5
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3
 
Flash taller 4
Flash taller 4Flash taller 4
Flash taller 4
 
Animaciones flash
Animaciones flashAnimaciones flash
Animaciones flash
 
Flash professional cs5
Flash professional cs5Flash professional cs5
Flash professional cs5
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3
 
Silabo 3er año 2015 - computo
Silabo 3er año   2015 - computoSilabo 3er año   2015 - computo
Silabo 3er año 2015 - computo
 
Silabo 4to año 2015-computo
Silabo 4to año  2015-computoSilabo 4to año  2015-computo
Silabo 4to año 2015-computo
 
SilaboSyllabus de dreamweaver
SilaboSyllabus de dreamweaverSilaboSyllabus de dreamweaver
SilaboSyllabus de dreamweaver
 
6 to prim
6 to prim6 to prim
6 to prim
 
Adobe flash-cs5
Adobe flash-cs5Adobe flash-cs5
Adobe flash-cs5
 
Crossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flashCrossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flash
 
Silabo 5to año 2015-computo
Silabo 5to año 2015-computoSilabo 5to año 2015-computo
Silabo 5to año 2015-computo
 

Similar a lash cs5Tutorial1

Similar a lash cs5Tutorial1 (20)

Iniciación a photoshop
Iniciación a photoshopIniciación a photoshop
Iniciación a photoshop
 
Tutorial de flash
Tutorial de flashTutorial de flash
Tutorial de flash
 
Clase 1 quinto mes
Clase 1 quinto mesClase 1 quinto mes
Clase 1 quinto mes
 
Tutorial Photoshop
Tutorial PhotoshopTutorial Photoshop
Tutorial Photoshop
 
Macromedia Flash (conceptos básicos)
Macromedia Flash (conceptos básicos)Macromedia Flash (conceptos básicos)
Macromedia Flash (conceptos básicos)
 
Tutorial Prezi
Tutorial PreziTutorial Prezi
Tutorial Prezi
 
Cap3 o oimpress
Cap3 o oimpressCap3 o oimpress
Cap3 o oimpress
 
Tutorial Impress 3
Tutorial Impress 3Tutorial Impress 3
Tutorial Impress 3
 
Photoshop capitulo i
Photoshop capitulo iPhotoshop capitulo i
Photoshop capitulo i
 
Herramientas1 091130135131-phpapp01
Herramientas1 091130135131-phpapp01Herramientas1 091130135131-phpapp01
Herramientas1 091130135131-phpapp01
 
7° practica de photoshop
7° practica de photoshop7° practica de photoshop
7° practica de photoshop
 
Herramientas de flash
Herramientas de flashHerramientas de flash
Herramientas de flash
 
Tutorial illustrator
Tutorial illustratorTutorial illustrator
Tutorial illustrator
 
7° practica de photoshop
7° practica de photoshop7° practica de photoshop
7° practica de photoshop
 
Flash conceptos basicos
Flash conceptos basicosFlash conceptos basicos
Flash conceptos basicos
 
IllustratorCS5_cast.pdf
IllustratorCS5_cast.pdfIllustratorCS5_cast.pdf
IllustratorCS5_cast.pdf
 
Illustrator cs5 cast
Illustrator cs5 castIllustrator cs5 cast
Illustrator cs5 cast
 
Sistemas Aplicativos
Sistemas AplicativosSistemas Aplicativos
Sistemas Aplicativos
 
Manual de corel draw 12
Manual de corel draw 12Manual de corel draw 12
Manual de corel draw 12
 
Edgar campo flash
Edgar campo flashEdgar campo flash
Edgar campo flash
 

Más de Milton-2 Palomino (13)

Ejercicio word pad
Ejercicio word padEjercicio word pad
Ejercicio word pad
 
Ingemmet
IngemmetIngemmet
Ingemmet
 
Universo
UniversoUniverso
Universo
 
ini
iniini
ini
 
Libro tutoría1
Libro tutoría1Libro tutoría1
Libro tutoría1
 
Proyecto final del sitio web esfap
Proyecto final del sitio web esfapProyecto final del sitio web esfap
Proyecto final del sitio web esfap
 
Bienvenidos al tutorial de
Bienvenidos al tutorial deBienvenidos al tutorial de
Bienvenidos al tutorial de
 
Bienvenidos al tutorial de
Bienvenidos al tutorial deBienvenidos al tutorial de
Bienvenidos al tutorial de
 
Manual de dreamweaver listo
Manual de dreamweaver listoManual de dreamweaver listo
Manual de dreamweaver listo
 
Flas cs5Animacion de graficos
Flas cs5Animacion de graficosFlas cs5Animacion de graficos
Flas cs5Animacion de graficos
 
Macromedia
MacromediaMacromedia
Macromedia
 
05 informe final (cd rom)
05 informe final (cd rom)05 informe final (cd rom)
05 informe final (cd rom)
 
Fórmulas de interés compuesto
Fórmulas de interés compuestoFórmulas de interés compuesto
Fórmulas de interés compuesto
 

Último

715422705-PROGRAMACION-ANUAL-CCSS-1-2024.docx
715422705-PROGRAMACION-ANUAL-CCSS-1-2024.docx715422705-PROGRAMACION-ANUAL-CCSS-1-2024.docx
715422705-PROGRAMACION-ANUAL-CCSS-1-2024.docxkattiagonzalesrengif
 
Ergonomía en Oficinas- Ergonomía en Oficina.pptx
Ergonomía en Oficinas- Ergonomía en Oficina.pptxErgonomía en Oficinas- Ergonomía en Oficina.pptx
Ergonomía en Oficinas- Ergonomía en Oficina.pptxmolinabdiego93
 
lollllllllllllllllllllllllllllllllllllllllllllllll
lolllllllllllllllllllllllllllllllllllllllllllllllllollllllllllllllllllllllllllllllllllllllllllllllll
lollllllllllllllllllllllllllllllllllllllllllllllllJesusFlores332
 
Inyección electrónica, Diagnostico por imagenes.pdf
Inyección electrónica, Diagnostico por imagenes.pdfInyección electrónica, Diagnostico por imagenes.pdf
Inyección electrónica, Diagnostico por imagenes.pdfmiltonantonioescamil
 
Manual de Camioneta Toyota doble traccion 20023
Manual de Camioneta Toyota doble traccion 20023Manual de Camioneta Toyota doble traccion 20023
Manual de Camioneta Toyota doble traccion 20023danyercatari1
 
Manual Volkswagen gol voyage 2015(1).pdf
Manual Volkswagen gol voyage 2015(1).pdfManual Volkswagen gol voyage 2015(1).pdf
Manual Volkswagen gol voyage 2015(1).pdfAlbisRosMartnez
 
Leyes de Kirchhoff ejercciosdddddddddddddddddddddddddddddddddddddddd
Leyes de Kirchhoff ejercciosddddddddddddddddddddddddddddddddddddddddLeyes de Kirchhoff ejercciosdddddddddddddddddddddddddddddddddddddddd
Leyes de Kirchhoff ejercciosddddddddddddddddddddddddddddddddddddddddLeonardoMedrano7
 

Último (7)

715422705-PROGRAMACION-ANUAL-CCSS-1-2024.docx
715422705-PROGRAMACION-ANUAL-CCSS-1-2024.docx715422705-PROGRAMACION-ANUAL-CCSS-1-2024.docx
715422705-PROGRAMACION-ANUAL-CCSS-1-2024.docx
 
Ergonomía en Oficinas- Ergonomía en Oficina.pptx
Ergonomía en Oficinas- Ergonomía en Oficina.pptxErgonomía en Oficinas- Ergonomía en Oficina.pptx
Ergonomía en Oficinas- Ergonomía en Oficina.pptx
 
lollllllllllllllllllllllllllllllllllllllllllllllll
lolllllllllllllllllllllllllllllllllllllllllllllllllollllllllllllllllllllllllllllllllllllllllllllllll
lollllllllllllllllllllllllllllllllllllllllllllllll
 
Inyección electrónica, Diagnostico por imagenes.pdf
Inyección electrónica, Diagnostico por imagenes.pdfInyección electrónica, Diagnostico por imagenes.pdf
Inyección electrónica, Diagnostico por imagenes.pdf
 
Manual de Camioneta Toyota doble traccion 20023
Manual de Camioneta Toyota doble traccion 20023Manual de Camioneta Toyota doble traccion 20023
Manual de Camioneta Toyota doble traccion 20023
 
Manual Volkswagen gol voyage 2015(1).pdf
Manual Volkswagen gol voyage 2015(1).pdfManual Volkswagen gol voyage 2015(1).pdf
Manual Volkswagen gol voyage 2015(1).pdf
 
Leyes de Kirchhoff ejercciosdddddddddddddddddddddddddddddddddddddddd
Leyes de Kirchhoff ejercciosddddddddddddddddddddddddddddddddddddddddLeyes de Kirchhoff ejercciosdddddddddddddddddddddddddddddddddddddddd
Leyes de Kirchhoff ejercciosdddddddddddddddddddddddddddddddddddddddd
 

lash cs5Tutorial1

  • 1. Guía de aprendizaje de Flash CS5 Tutorial 1. Creación de una ilustración vectorial Paso 1 de 14 Esta es la pantalla de bienvenida que aparece al ejecutar Flash. En esta pantalla tenemos seis áreas principales: Crear con plantilla. Abre un nuevo archivo a partir de una plantilla. Abrir un elemento reciente. Acceso directo a archivos recientes y opción Abrir para buscar otros archivos. Crear nuevo. Creación de un documento nuevo de Flash del tipo que seleccionemos. Para comenzar seleccionaremos Crear nuevo > ActionScript 3.0. Ampliar. Vínculo a Flash Exchange, un sitio de intercambio de recursos. Aprendizaje. Enlaces a diferentes tutoriales sobre Flash CS5. Puesta en marcha, Nuevas funciones, Desarrolladores y Diseñadores. Vínculos a sitios de ayuda de Flash. Paso 2 de 14 En Flash CS5 podemos elegir entre varios espacios de trabajo, así como crear nuestro espacio de trabajo personalizado. Cada espacio de trabajo tiene una distribución diferente de las diferentes áreas, y puede mostrar por defecto unos paneles u otros. Podemos cambiar a diferentes espacios de trabajo seleccionando en el desplegable, situado en la parte superior al lado del buscador, el espacio de trabajo que queramos. En esta guía trabajaremos con el espacio de trabajo llamado Conceptos básicos.
  • 2. Paso 3 de 14 Generalmente, el primer paso que haremos al trabajar con un archivo Flash es configurar las características principales de la película. Podemos ver las características de nuestra película en el inspector de Propiedades. Si no vemos este panel, pulsaremos sobre el menú Ventana > Propiedades*. Si en este panel vemos otros datos que no corresponden con la imagen, seleccionaremos la herramienta Selección pulsando sobre la flecha superior de la barra de herramientas o bien pulsando la tecla de acceso directo V. Este acceso directo puede ser muy útil, ya que es una de las herramientas que más utilizaremos. Con la herramienta Selección, pulsaremos sobre un lugar vacío del escenario para asegurar que no haya nada seleccionado. En la parte superior de este panel vemos el título de documento. Después está el área Publicar, de la que hablaremos en otros tutoriales. Después nos encontramos con el área de Propiedades, en la que nos centraremos a continuación. Por último está la nueva área Historial del swf, en la que podremos ver algunos datos sobre los archivos swf que vayamos publicando. Dentro del área Propiedades, FPS muestra los fotogramas por segundo a los que está configurada la película. A mayor número de FPS, mayor velocidad y fluidez de la animación. Para algunas animaciones puede ser suficiente un valor de 12 o 18 FPS, pero de momento dejamos este valor en 24 fotogramas por segundo. Después tenemos el tamaño del escenario. Si queremos cambiar este valor, pulsaremos sobre el botón Editar que tenemos a su lado. Para este tutorial no vamos a modificar el tamaño. Escenario muestra el color de fondo de nuestra película. Vamos a cambiar el color de fondo pulsando sobre el cuadro de color y seleccionando un color azulado, tal y como se puede ver en este vídeo. *Siempre que un panel no está visible, podemos abrirlo haciendo clic en su nombre desde el menú Ventana. Paso 4 de 14 Para comenzar vamos a dibujar una nube trazando varios círculos superpuestos. En primer lugar seleccionaremos la herramienta Óvalo, que se encuentra agrupada junto con la herramienta Rectángulo. Todas las herramientas que tienen otras herramientas agrupadas muestran en la barra de herramientas una pequeña flecha negra. Manteniendo pulsada la herramienta correspondiente podemos acceder al resto de herramientas que están agrupadas junto a ella. Una vez seleccionada la herramienta Óvalo, el inspector de Propiedades mostrará atributos relacionados con esta herramienta. Lo único que vamos a asegurar de momento es que el trazo sea negro y el relleno blanco. De no serlo, pulsaremos sobre el cuadro de color correspondiente para cambiarlo. Estos valores también se pueden cambiar directamente desde el panel de Herramientas. El trazo se refiere al color del perfil del objeto, y el relleno al color que muestra en su interior. Las Opciones de óvalo sólo pueden modificarse antes de dibujar el óvalo, salvo que hubiéramos elegido la herramienta Óvalo simple, en cuyo caso podríamos modificar estos valores después de haber dibujado el objeto. Sin embargo, con Óvalo simple el objeto permanece agrupado e independiente, por lo que no se combina con otras formas al superponerse. Entre Rectángulo y Rectángulo simple existen estas mismas diferencias. En este caso vamos a superponer y combinar varios círculos, por lo que hemos elegido la herramienta Óvalo.
  • 3. Dibujo de objeto, un modificador que aparecerá en la parte inferior de la barra de Herramientas, deberá estar también desactivado, ya que de lo contrario la forma creada también permanecerá agrupada y, por tanto, no la podremos combinar con otras formas. Desactivaremos también el modificador Ajustar a objetos para tener una mayor libertad a la hora de crear las formas ovaladas y situar los círculos que dibujemos. Por ejemplo, si este modificador está activado, los óvalos casi redondos se convertirán en círculos perfectos, lo cual en este caso no nos interesa. Ahora dibujaremos una nube situándola en la esquina superior izquierda del escenario. Con la herramienta Óvalo seleccionada, dibujamos cuatro óvalos en el escenario de forma similar a como se muestra en el vídeo. Después, con la herramienta Selección (la flecha superior de la barra de herramientas, que también se puede activar pulsando la tecla V), hacemos clic sobre alguno de los trazos negros. Como podremos ver, quedará seleccionado un tramo del trazo, ya que los óvalos se han combinado para formar ahora un solo dibujo. Eliminamos el trazo seleccionado pulsando la tecla Supr. Podemos eliminar el resto de los trazos de la misma manera, es decir, seleccionando cada tramo y borrándolo con la tecla Supr. Sin embargo, como todos los trazos se encuentran unidos por algún punto, una forma más rápida de borrarlos es haciendo doble clic sobre cualquier trazo, y con ello quedarán seleccionados todos los trazos que estén unidos. De esta forma, al pulsar la tecla Supr se borrarán todos los trazos seleccionados. Si observamos la línea de tiempo, podemos ver que ahora el primer fotograma de la Capa 1 tiene un punto negro sobre un fondo gris, lo que indica que nuestro dibujo ha quedado incluido en este fotograma. Las capas, además de definir el orden de apilamiento de los distintos elementos que tengamos en el escenario, también son una buena forma de organizar y mantener independientes las diferentes partes de una ilustración. Es por tanto muy recomendable crear una capa diferente para cada elemento. En primer lugar renombramos la capa actual como cloud haciendo doble clic sobre su nombre. Para evitar modificar su contenido accidentalmente, la bloqueamos haciendo clic sobre el punto que hay bajo el candado. Por último, crearemos una nueva capa. Si seleccionamos esta nueva capa, un pequeño lápiz junto a su nombre indicará que se encuentra activa. Antes de continuar, guardad el archivo con el nombre tutorial1.fla seleccionando Archivo > Guardar. Es conveniente que nos acostumbremos a guardar el archivo regularmente a medida que vayamos avanzando con el tutorial. Paso 5 de 14 Paso 6 de 14
  • 4. Vamos a dibujar un pájaro con las alas extendidas, comenzando por el cuerpo. En primer lugar vamos a asignar que no haya trazo (representado por un rectángulo blanco con una franja roja) y un color de relleno negro. Esta vez cambiaremos los colores en la propia barra de herramientas. El resultado es el mismo que si lo hacemos en el inspector de Propiedades. Una de las formas más sencillas de comenzar a dibujar es empezar dibujando formas básicas, como por ejemplo óvalos o rectángulos, y modificando después esas formas con la herramienta Selección. Vamos a dibujar el pájaro de esta forma. Para crear el cuerpo del pájaro, dibujaremos una forma ovalada con la herramienta Óvalo. Después modificaremos el óvalo con la herramienta Selección (V) hasta conseguir una forma acampanada similar a la del vídeo. Cuando acercamos el puntero a una forma con la herramienta Selección, el puntero cambia para indicar el tipo de modificación que se puede realizar en la línea o el relleno: si aparece una esquina podremos modificar un extremo, si aparece una curva podremos ajustar una curva, y si aparece una cruz podremos desplazar el objeto. Siempre que queramos hacer una de estas modificaciones tendremos que hacer clic cuando el puntero adopte la forma que busquemos y arrastrar hasta el lugar deseado. En este caso, situándonos en el borde del óvalo, sólo aparecía la forma curvada, ya que al tratarse de una forma ovalada no hay ninguna esquina. De forma similar a como hicimos en el paso 6, llamaremos body a la capa actual, la bloquearemos, y crearemos una nueva capa llamada wings. Para dibujar el ala utilizaremos la herramienta Rectángulo, y posteriormente modificaremos la forma creada con la herramienta Selección. Como podemos ver en el vídeo, en este caso sí que podemos modificar tanto esquinas como curvas. La forma del puntero ayuda a encontrar las diferentes curvas y esquinas incluso en el área en la que se superponen ambas formas negras (alas y cuerpo). Por ahora nos interesa que el ala se muestre totalmente extendida aunque quede menos realista. Más adelante, en los tutoriales de animación, la doblaremos y moveremos convenientemente. El ala izquierda la haremos a partir de una copia del ala derecha. Normalmente, cuando vayamos a reutilizar un objeto, lo más adecuado es convertirlo previamente en símbolo. Sin embargo, para este primer tutorial vamos a copiar y pegar el ala directamente, sin convertirla en símbolo. El uso de los símbolos lo estudiaremos en el próximo tutorial. Paso 7 de 14 Paso 8 de 14
  • 5. Vamos a trabajar con el panel Alinear, que podemos abrir pulsando sobre su icono o bien seleccionando Ventana > Alinear. En Flash podemos colocar los paneles en el lugar que nos resulte más cómodo, pudiendo personalizar de esta forma nuestro espacio de trabajo según nuestras necesidades. También es posible agrupar los paneles junto con otras áreas del espacio de trabajo. Si en cualquier momento queremos volver al espacio de trabajo por defecto, seleccionaremos Restablecer 'Conceptos básicos' en el desplegable del espacio de trabajo. Volviendo a nuestro pájaro, vamos en primer lugar a alinear las alas con ayuda del panel Alinear. Seleccionamos las dos alas haciendo clic sobre ellas con la herramienta Selección. Para hacer una selección múltiple deberemos mantener pulsada la tecla Mayúsculas. Abrimos el panel Alinear. Lo primero que debemos hacer es desactivar la casilla Alinear en escenario si estuviera seleccionada , ya que de lo contrario los elementos no se alinearán entre sí, sino respecto al escenario. Con ambas alas seleccionadas hacemos clic en Alinear borde superior. Desbloqueamos la capa del cuerpo del pájaro para poder seleccionarlo, y con los tres elementos seleccionados (el cuerpo y las alas), abrimos de nuevo el panel Alinear y hacemos clic en Distribuir horizontalmente respecto al centro. Paso 9 de 14 Hacemos clic sobre el ala con el botón derecho del ratón y seleccionamos Copiar del menú contextual. Después, sobre algún lugar vacío del escenario, hacemos clic de nuevo con el botón derecho del ratón y seleccionamos Pegar. Con la copia del ala seleccionada, seleccionamos Modificar > Transformar > Voltear horizontalmente. Hacemos clic sobre el ala y la arrastramos hasta una posición aproximada a su ubicación final. En el siguiente paso, con ayuda del panel Alinear, la colocaremos en su posición definitiva. Paso 10 de 14
  • 6. Para una mejor organización de los elementos de una película, podemos agrupar las capas en carpetas. Vamos a crear en la línea de tiempo una nueva carpeta llamada bird que incluirá las capas wings y body. Para ello, después de crear la carpeta, arrastraremos las capas a su interior. Al bloquear la carpeta podemos observar que se bloquean todas las capas que contiene. Después crearemos una nueva capa para añadir más elementos al escenario. Recordemos guardar regularmente nuestro trabajo con Archivo > Guardar. Vamos a hacer una pequeña aproximación a otras dos herramientas vectoriales de Flash, comenzando por la herramienta Lápiz. Al activar el lápiz, veremos que en el inspector de Propiedades el relleno aparece automáticamente con una franja roja que significa que no hay relleno, ya que el lápiz sólo puede dibujar trazos. Seleccionaremos un color negro para el trazo, y un grosor de 3 píxeles. En la parte inferior de la barra de herramientas aparecerán los modificadores asociados a la herramienta lápiz. Vamos a tratar de dibujar algunos pájaros con estos tres modificadores. El modificador Enderezar convierte las líneas en rectas o en figuras geométricas comunes. El modificador Suavizar dibuja curvas suaves. El modificador Tinta dibuja curvas a mano alzada, sin aplicar ninguna modificación. Una vez dibujada una forma, sea con estas o con otras herramientas, siempre podrá ser suavizada o enderezada haciendo clic repetidamente en los modificadores Suavizar y Enderezar que aparecerán al seleccionar una forma en el escenario. Paso 11 de 14 Paso 12 de 14
  • 7. Por último vamos a utilizar la herramienta Pincel. En la parte inferior de la barra de herramientas aparecerán los modificadores asociados a la herramienta Pincel. Los dos modificadores inferiores se refieren al tamaño y la forma del pincel. Vamos a seleccionar como forma del pincel una forma ovalada vertical. El dibujo realizado con el pincel queda generalmente suavizado, por lo que es una buena herramienta para hacer este tipo de dibujos. A diferencia del lápiz, el pincel pinta rellenos, y no trazos. Por tanto, el dibujo realizado con el pincel puede ser modificado como un relleno. Si se tiene una tableta sensible a la presión aparecerán dos nuevos modificadores, el modificador Presión y el modificador Inclinación. Si se activan estos modificadores podremos variar la anchura y la inclinación de los trazos del pincel dependiendo de la presión e inclinación que ejerzamos con nuestro lápiz. Los pájaros de estos dos últimos pasos los hemos dibujado solamente para experimentar con la herramienta lápiz y la herramienta pincel, pero el primer pájaro y la nube los utilizaremos en posteriores tutoriales sobre animación, así que es muy importante que guardéis vuestro trabajo. Para ello selecciona Archivo > Guardar o Ctrl+S. Para complementar los conceptos desarrollados en este tutorial, se recomienda hacer las siguientes actividades: Dibuja otra nube y modifica después su forma con la herramienta Selección. 1. Modifica también la forma de los pájaros que hemos creado con el lápiz y con el pincel para comprender mejor las diferencias entre estas dos herramientas. 2. Crea una forma nueva partiendo de un óvalo o de un rectángulo.3. Paso 13 de 14 Paso 14 de 14