Conceptos Flash, Photoshop y Diseo Web

Principios de Flash
Derechos de autor
Programas de diseo
Sonido
Imgenes vectoriales
Imgenes mapa de bits

PRINCIPIOS DE FLASH

F u t r e S p la s h A n im a to r F la s h

S u p e r P a in t In e t l iD r a w

Flash es una herramienta de edicin con la que los diseadores y desarrolladores pueden
crear presentaciones, aplicaciones y contenido interactivo.

DERECHOS DE AUTOR
Los derechos de autor consisten en una serie de normas y derechos que la ley otorga al
creador de alguna obra literaria, cientfica, artstica o didctica, para su uso y publicacin.
En Mxico la Ley Federal del Derecho de Autor otorga derechos patrimoniales que estn
vigentes durante toda la vida de autor hasta 100 aos despus de su muerte o de su
publicacin.

PROGRAMAS DE DISEO
Adobe Photoshop

Adobe Illustrator
Adobe Fireworks

Maneja imgenes fotogrficas; poseen una

mayor cantidad de informacin

FOTOGRAFAS EN FLASH
Al importarlas deben de tener el tamao final
al que sern publicadas
72 dpi
JPG son los mas recomendables
Ilustraciones con base en vectores
Crean documentos de poco peso
Es posible conservar sus atributos
originales, sin importar si son PNG o
materiales grficos.
OPCIONES PARA IMPORTAR ARCHIVOS DE
FIREWORKS
Importar como mapa de bits plano
Importar # de pgina

SONIDO
Flash puede importar archivos de audio en:

MP3 [Windows y Mac]

WAV [Windows]
AIFF [Mac]

El sonido en un frame puede ejecutarse en 2 modos de sincrona [Sync]:

Evento [Event] El sonido se reproduce completo, independientemente si la

pelcula sigue o no.
Flujo [Stream] Sincroniza el sonido con la Lnea de Tiempo.

A un sonido se le pueden incluir los siguientes efectos [en el panel de propiedades]:

Ninguno [none] no tiene ningn efecto

Canal izquierdo [left cannel] se reproduce por el altavoz izquierdo
Canal derecho [right cannel] se reproduce por el altavoz derecho
Reduccin progresiva a la Derecha [fade left to right] comienza por el altavoz
izquierdo y pasa al derecho
4

Reduccin progresiva a la Izquierda [fade right to left] comienza por el altavoz

derecho y pasa al izquierdo
Aumento progresivo [fade in] El sonido comienza con volumen 0 y va
incrementando hasta que llega al volumen original.
Desvanecimiento [fade out] Comienza con su volumen origina y baja hasta el 0
Personalizado [custom] Puede modificarse la forma en que se escuchar en los
altavoces.

IMAGENES VECTORIALES
Caractersticas:

Tienen una lnea de contorno

Los vectores se pueden agrupar, separar, recortar, intersectar y relacionar con
otros vectores con otros vectores del dibujo
Cada vector se puede manipular sin afectar a los otros vectores

Si en lugar de unir 2 puntos con una recta se hace con una curva, los puntos se
denominan nodos o puntos de anclaje
Desventajas de los vectores

No son realistas.

Ventajas de los vectores:

No importa el tamao en el que se dibuje.

Cada objeto est definido por frmulas matemticas independientes.
Se puede controlar con gran precisin la forma.
No estn limitadas a un rea
Puede modificarse en cualquier momento
Se puede reutilizar [en otros proyectos]
El peso es muy reducido
Permite trabajar con texto

Formatos de archivo
Existen diferentes aplicaciones que trabajan con archivos vectoriales como:

Adobe Illustrator [AI]

Corel Draw [CDR]
Corel Exchange [CMX]
5

Computer Graphics Metafile [CGM]

Inkscape [SVG]
Auto CAD [DXF]

IMGENES DE MAPA DE BITS

Conjunto de pxeles que estn ordenados y coloreados para definir un patrn.
La resolucin se mide en dpi o puntos por pulgada.
Debido a que los mapas de bits dependen de la resolucin es difcil modificar su tamao
sin reducir la calidad de la imagen.
ENTORNO DE TRABAJO
Se compone de 6 paneles principales:

Escenario [Stage] Parte central del programa; es donde se coloca el contenido.

Lnea del tiempo [Timeline] Muestra el tiempo [en frames] y la profundidad [en
layers]. Sus partes son:
o Layers: son capas; existen layers guas, guas para movimiento y mscaras
o Frames: son los cuadros de una pelcula; existen: frame, keyframe y blank
keyframe
o Cabeza lectora:indica el frame actual que se muestra en el escenario.
Herramientas [Tools] Permiten crear, editar, dibujar, pintar, seleccionar y
modificar objetos.
Propiedades [Properties] Se pueden modificar los atributos ms utilizados de
cualquier herramienta.
Biblioteca de Smbolos [Library] Se guardan y organizan los smbolos creados
en Flash, adems de archivos grficos, imgenes de mapa de bits, archivos de
sonido y clips de video.
Acciones [Actions] Permite crear y editar cdigo en Action Script.

HERRAMIENTAS
El panel de herramientas est dividido en 4 secciones:

Herramientas vectoriales: Pincel (B); borrador (E); transformacin libre (Q); texto
(T); pluma (P);lpiz (Y)
Herramientas de vistas: Zoom (Z); hand (barra espaciadora/H)
Color de relleno y color de contorno: Paint bucket (K); lnea (N)
Opciones: Muestra las variantes de la herramienta seleccionada

Arrow (V). Sirve para seleccionar y manipular objetos en el escenario.

Subselection (A). Sirve para seleccionar los puntos que dan forma a un
grfico.
Transform (Q). Sirve para escalar, distorsionar y rotar grficos.
Rotacin 3D (W).
Lasso (L). Permite seleccionar reas irregulares a mano alzada.
Pen (P). Se usa para crear polgonos, curvas y trazos controlados.
Text (T). Permite ingresar textos.
Line (N). Permite crear lneas rectas.
Rectangle (R).Sirve para crear cuadrados o rectngulos.
Pencil (Y). Permite dibujar lneas o contornos a mano alzada.
Brush (B). Se emplea para aplicar rellenos.
Deco (U). Permite rellenar reas grandes con patrones decorativos.
Bone(M). Permite animar el movimiento de una extremidad. Esta tcnica se
denomina Cinemtica inversa (IK)
PaintBucket (K). Se utiliza para rellenar grficos o cambiar su color de
relleno.
Eyedropper (I). Se utiliza para tomar una muestra de color.
Eraser (E). Elimina grficos.
Hand (barra espaciadora)o (H). Mueve el escenario.
Zoom (Z). Aumenta o disminuye la visin del rea de trabajo.
Stroke Color. Establece el color de contorno de un grfico.
Fill Color. Establece el color de relleno de un grfico.
Ajustar a objeto. Crea lneas magnticas que intentarn unirse con otros
objetos, al momento de ser trazada.

TEXTO
Existen varios estilos de textos:

Texto esttico: Son textos que no se modificarn al publicar la pelcula.

Texto dinmico: Puede ser modificado durante la reproduccin de la pelcula.
Texto de entrada: Se utiliza para que el usuario de la pelcula terminada pueda
introducir informacin.

LNEA DE TIEMPO
Se utiliza para organizar las imgenes, grficos, sonidos e instrucciones de programacin
de una pelcula.
De forma predeterminada, se reproducen 12 frames por segundo.
Existen 3 clases de frames:

Keyframe. Marca un nuevo contenido en la pelcula. Se identifica por un punto

negro.
Frame. Son los frames que siguen al keyframe. No representan contenido nuevo.
Alargan la duracin del contenido.
Blank Keyframe. Son Keyframes sin contenido. Se representan con un punto
blanco.

SMBOLOS
Un smbolo es un objeto que se guarda en la biblioteca con el principal objetivo de usarlo
ms de una vez durante la pelcula, o asignarle cdigo de programacin.
Existen 3 clases de smbolos:

Movie clip. Se utiliza cuando el smbolo va a contener animacin. Puede ser

programado con Action script.
Button. Reacciona al puntero del ratn.
o Reposo[Up]: Esta normal o apagado.
o Sobre [Over]: El puntero del mouse esta sobre l.
o Presionado [Down]: Se despliega cuando se hace clic sobre l.
o Zona sensible [Hit]: Contiene una imagen que delimita el rea sensible del
botn.
Graphic. Es un smbolo esttico; NO puede ser programado con Action script.

INSTANCIAS
Para crear una instancia se necesita seleccionar el frame y arrastrarlo desde la biblioteca
al escenario.
Cuando modificas cualquier instancia, el smbolo original no se ve afectado.
Se pueden establecer parmetros de una instancia, tales como:

Nombre de instancia
X - posicin horizontal.
Y posicin vertical
Ancho
Alto
Rotacin
Sesgo deformacin oblicua
8

Color [brillo, tinta, avanzada y alfa]

TIPOS DE ANIMACIN
Animacin Cuadro por Cuadro

Animacin Interpolacin Clsica

Animacin Interpolacin de Movimiento

Animacin Interpolacin de forma.

Utiliza un Keyframe para cada movimiento.

Este tipo de animacin funciona bien a 12
frames por segundo.
Debes usar instancias del mismo smbolo
en el frame inicial y en el final.

Se utiliza principal mente para mover

smbolos. El nmero de cuadros que usar
depender del calor que hayamos
determinado al configurar el documento
Deforma vectores.
Debe existir un grfico sobre el escenario
que no sea un smbolo

FILTROS
Permiten aadir efectos visuales a texto, botones y Movie Clips

Drop Shadow [sombra]

Blur [desenfocar]
Glow [iluminacin]
Bevel [bisel]
Gradient Glow [iluminacin degradada]
Gradient bevel [bisel degradado]
Adjust color [ajuste de color]