ADOBE FLASH CS3

Adobe Certified Expert

Introducción:

¿QUÉ ES FLASH CS3 PROFESIONAL?

El software Adobe Flash CS3 Professional es el entorno de creación más avanzado para
generar contenido interactivo de alta calidad para plataformas móviles, digitales y
web.
Cree sitios web interactivos, anuncios con abundante contenido multimedia, medios
didácticos, atractivas presentaciones, juegos y mucho más. Los desarrolladores y
diseñadores que trabajan con los sistemas Macintosh y Windows® confíe en Flash
CS3 y en el software Adobe Flash Player para asegurarse de que su contenido
alcanza el mayor número de destinatarios posible.

Flash CS3 Professional es una aplicación disponible para Microsoft® Windows®, y para
Mac como aplicación binaria universal, que proporciona las herramientas necesarias
para llevar a cabo sus proyectos con éxito.
Introducción:

REQUERIMIENTOS DE SISTEMA PARA INSTALACION:

WINDOWS

•  Intel® Pentium® 4, Intel Centrino®, Intel Xeon® o procesador Intel Core™ Duo (o compatible)

•  Microsoft® Windows® XP con Service Pack 2 o Windows Vista™ Home Premium, Business,
Ultimate o Enterprise (certificada para ediciones de 32 bits).

•  512 MB de RAM (se recomienda 1 GB)

•  Resolución de pantalla de 1.024 x 768 con tarjeta de vídeo de 16 bits

•  Unidad de DVD-ROM

•  Software QuickTime 7 necesario para funciones multimedia

Introducción:

REQUERIMIENTOS DE SISTEMA PARA INSTALACION:

MACINTOSH

•  Procesador PowerPC® G4 o G5 o Intel® multinúcleo a 1 GHz

•  Mac OS X v10.4.8-10.5 (Leopard)

•  512 MB de RAM (se recomienda 1 GB)

•  Resolución de pantalla de 1.024 x 768 con tarjeta de vídeo de 16 bits

•  Unidad de DVD-ROM

•  Software QuickTime 7 necesario para funciones multimedia

Qué hay de nuevo en flash CS3:

•  Integración con Adobe Photoshop e Illustrator, manteniedo capas y estructura.

•  Potencia de ActionScript, convirtiendo animaciones

•  Interfaz de Adobe

•  Adobe Device Central CS3

•  Depurador avanzado.

•  Componentes de interfaz de usuario.

•  Exportación avanzada de Quicktime.

•  Herramientas de video y de codificación que ahorran tiempo.

Lo que usted aprenderá de este tema:

TEMA: COMENZANDO CON FLASH CS3

•  Crear documento nuevo.

•  Entendiendo la interface.
•  Reacomodo y personalización de interface.
•  Organizar documentos en “tabs”
•  Busqueda de ayuda.
2. Comenzando con Flash CS3:

Creando un documento nuevo:

Workspace predeterminado:

TIMELINE (LÍNEA DE TIEMPO)

PANEL DE
HTAS. STAGE
OTROS
PANELES

PANEL DE PROPIEDADES
2. Comenzando con Flash CS3:

Ordenando area de trabajo (workspace):

Ir a preferencias:
Auto-collapse icon
PARA QUE SE CIERREN LAS
VENTANAS AUTOMATICAMENTE

Reorganizando panel:
Window------windows—default

Guardando panel:
Window---windows----save current
2. Comenzando con Flash CS3:

Creando documento_tabs
Crear un archivo nuevo___crea un “tab” en el mismo panel
Preferencias------ Open document in tabs

Window---cascade
Window---tile
Windows---conbine a tabs

Preferencias----Open test movie in tabs (la ventana de test la abre en tab)

Maximizar área de trabajo:

Window----hide panel (F4)

Ayuda de flash
Help---flash help (F1)

Preferencias----on lounch (welcome screen)

2. REPASO:

•  MENCIONA LAS VENTANAS PRINCIPALES DE LA INTERFACE DE FLASH.

•  QUE ES EL STAGE
•  MENCIONA LAS MANERAS DE REORGANIZAR UN PANEL.
•  COMO GUARDAS EL WORKSPACE “PERSONALIZADO”
•  DE QUE MANERA BUSCAS INFORMACIÓN ACERCA DE FLASH
Lo que usted aprenderá de este tema:

TEMA: DIBUJANDO

•  Aprenderá a utilizar las herramientas de modo dibujo.

•  Utilizará los modos de pintura “relleno y contorno”.
•  Aprenderá a dibujar con diferentes modos de shape (formas).
•  Manipular las líneas de contorno y relleno.
•  Dibujar con brushes (pinceles).
•  Diferentes modos de borrado.
3. Dibujando:

Herramienta Zoom (Z):

Verificar como en el panel de HTAS, en la parte inferior, cambia de acuerdo a la hta.

Herramienta Lapiz (Y):

Verificar como en el panel de HTAS, en la parte inferior, cambia de acuerdo a la hta. Y en el “panel de
propiedades”

Dibujar con la hta. Pluma (P) :

Verificar como en el panel de HTAS, en la parte inferior, cambia de acuerdo a la hta. Y en el “panel de
propiedades”

Herramienta rapida de color :

Stroke (contorno) y de fill (relleno)

Dibujando con formas (shapes):

Dibujar con las diferentes formas que hay

Las diferentes formas de seleccionar una forma:

Con la hta. Selección, toda el area
Una parte del area
Relleno, contorno
3. Dibujando:

Manipulando lineas de contorno:

Para convertit un contorno en contorno:
MODIFY---SHAPE—CONVERT LINES TO FILL
Con la HTA. Selección y la pluma, ver las diferentes opciones de modificar el contorno

Dibujar con la HTA pincel (B):

Dibujar 5 cuadros k no este activado el “objet drawing”
Ver las diferentes modalidades:
Paint normal
Paint fills
Paint behind
Paint selection
Paint inside

Modos de Borrar (E):

Dibujar 5 cuadros k no este activado el “objet drawing”
Ver las diferentes modalidades:
Erase Normal
Erase fills
Erase lines
Erase select fills
Erase inside------------------------------------ ver hta. Faucet
3. Dibujando:

Modos de dibujo:
Dibujar una ventana, y dibujar una estrella en modo “obtecj drawing” y SIN “objetc drawing”
Colocarla sobre la ventana cada una de ellas.
3. REPASO:

•  Cual es el shortcut de la herramienta zoom.

•  Cuál es es shorcut de la herramienta pincel y pluma.
•  Mencione como se convierte un contorno en contorno.
•  Mencione las diferentes maneras de pintar sobre un objeto.
•  Mencione las diferentes maneras de borrar un objeto.
•  Para que nos sirve el modo objeto de dibujo.
Lo que usted aprenderá de este tema:

TEMA: MANEJO DE COLOR

•  Aplicar los diferentes modos de color.

•  Manejo de degradado en objetos.
•  Agregar colores en paleta.
4. Manejo de color:

Color Mixer:
Dibujar un cuadro, y dibujar una estrella en modo “obtecj drawing”
Ver la paleta de colores.
Stroke y fill
Type: lineal, solido, radial

Herramienta de degradado (F):

Dibujar un cuadro, y dibujar una estrella en modo “obtecj drawing”
Ver las diferentes opciones de la HTA. Degradado.

Color Swtches:
Agrega colores en la paleta, para poderlos utilizar en otros proyectos.
Utilizar el cuenta gotas----seleccionar el color deseado y agregarlo al panel
4. REPASO:

•  Para que nos sirve el panel de color mixer.

•  Cuál es el shortcut de la herramienta para degradado.
•  Para que nos sirve el panel de color_swatches.
Lo que usted aprenderá de este tema:

TEMA: SIMBOLOS

•  Qué es un shape (forma)

•  Qué es un simbolo
•  Cómo se realiza un botón.
•  Qué es un MC (movieclip)
•  Que es un gráfico
•  Uso de librería.
•  Uso de herramientas de transformación.
•  Combinar diferentes objetos
5. Simbolos:

Acerca de los simbolos:

Dibujar FORMA (shape)
Movie clip (mc)
Boton (btn)
Grafico (gr)

BREAK APART
Poner un texto
MODIFY-----BREAK APART-------------- Si agregamos 2 veces,se vuelve objeto.

FUNCIONAMIENTO DE BOTONES
Abrir CHAPTER_05------05_04_buttons.fla
ANIMACIONES DE MC:
Abrir CHAPTER_05------05_05_movie_clips.fla (diferentes tipos de animaciones en mc)

FUNCIONAMIENTO DE GRAFICO
Abrir CHAPTER_05------05_06_graphics.fla
Explicar linea de tiempo y movimiento del grafico

LIBRERIA
Abrir CHAPTER_05------05_07_USING_THE LIBRARY.fla
Explicar panel de librería, ordenando por carpetas, copiar botones,comprimir audio y fotos
-----clic_btn_der------keep use counts now
5. Simbolos:

HERRAMIENTA TRANSFORMACION (Q):

Abrir CHAPTER_05------05_08_TRANSFORM_TOOLS.fla
Para copiar presionando tecla ALT+ARRASTRAR OBJECTO

PANEL DE TRANSFORMACION:
Abrir CHAPTER_05------05_09_TRANSFORM_PANELS.fla
Explicar la ventana de propiedades para cada uno de los objetos
Así como el pivote
Window-----align
Window---info
Window----transform

MENU DE TRANSFORMACIÓN:
Abrir CHAPTER_05------05_10_TRANSFORM_MENUS.fla
shape----- MODIFY---SHAPE---EXPAND FILL
MODIFY—SHAPE---- SOFTEN FILL EDGES

Drawing_object----- MODIFY_COMBINE OBJECTS----UNION,INTERSECT,PUNCH, CROP

Symbol-----MODIFY—SYMBOL—SWAP Y DUPLICATE

All----- MODIFY—TRANSFORM—ROTATE 90CW y CCW

--- FLIP HOR, VER
MODIFY----ARRANGE---BRING TO FRONT, FORW, BACK
5. REPASO:

•  Qué es un shape
•  Qué es un movie clip
•  Qué sucede si editas un mc a diferencia de otro.
•  Para que funciona el “break apart”
•  Cuantos estados tiene el boton?
•  Qué función nos da cada estado?
•  Cuál es el shorcut de la herramienta transformación
•  El panel de transformacion, alineación e información en que menu lo muestra.
Lo que usted aprenderá de este tema:

TEMA: LINEA DE TIEMPO

•  Las diferentes propiedades de capa dentro de la línea de tiempo.

•  Agregar y borrar grupos.
•  Qué es un frame y un keyframe.
•  Uso de frames y keyframes.
•  Frames multiples.
•  Copiar y pegar desde linea de tiempo.
•  Manejo de escenas.
6. Línea de Tiempo:

Propiedades de layers:
Explicar los layers del timeline
Abrir 06_01_layers_and_properties.fla

Ir al panel publish settings:

Para cambiar opciones de preview---- sirve cuando ocultamos el layer, para que no se vea el swf.
6. Línea de Tiempo:

AGREGAR Y BORRAR GRUPOS:

Insertar, borrar capa.
Crear carpeta

.
6. Línea de Tiempo:

Que es un keyframe:
Explicar que es un keyframe vs frame
6. Línea de Tiempo:

FRAMES MULTIPLES:
Podemos visualizar los frames que
Hay adelante y atrás.
--edit multiple frames.
-- onion skin outlines.
-- onion skin

COPIADO Y PEGADO:
Forma de pegado tradicional y pegado y copiado con TIMELINE.

MANEJO DE ESCENAS:
INSERT—SCENE
WINDOW---OTHER PANELS—SCENE (SHIFT+F2)

Frames en reversa.
MODIFY—TIMELINE---REVERSE FRAMES
6. REPASO:

•  De que manera se oculta una capa para que no se vea en el preview.

•  Qué es un frame
•  Qué es un keyframe.
•  Cuantas maneras hay de visualizar frames multiples.
•  Para que sirve el manejo de escenas
•  Menciona las diferentes formas de cambiar de escenas.
•  Cuál es el menu para realizar frames en reversa.
Lo que usted aprenderá de este tema:

TEMA: TEST Y PUBLICACIÓN DE ARCHIVOS

•  Adecuar un documento de acuerdo a necesidades.

•  Test de botones dentro de documento.
•  Simulación de test.
•  Parametros de publicación.
7. Línea de Tiempo:

Parametros de documento:
MODIFY—DOCUMENT (CTRL+J)
En PANEL DE PROPIEDADES---SIZE.

Test de botones dentro de documento:

CONTROL----ENABLE SIMPLE BUTTONS (ALT+CTROL+B)

Para visualizarlo en repeticion indefinida:

CONTROL----LOOP PLAYBACK.

Simulación de test:
CONTROL-----TEST MOVIE (CTROL+ENTER)
CONTROL---- TEST SCENE (ALT+CTROL+ENTER)

En modo de test de movie.

VIEW----BANDWITH PROFILER (CTRL+B)
VIEW---SIMULATE DOWNLOAD y seleccionar los templates de descarga.
VIEW--- SHOW REDRAW REGIONS (CTROL+E)
7. Línea de Tiempo:

Parametros para publicación:

FILE---PUBLISH SETTINGS (ALT+SHITF+F12)
PANEL DE PROPIEDADES.
7. REPASO:

•  Cuáles son las rutas para abrir las propiedades de un documento.

•  Cuál es menu de testeo de botones.
•  Cuales son las opciones de simulación de test de pelicula.
•  Cuál es menu para visualizar modo descarga.
Lo que usted aprenderá de este tema:

TEMA: MANIPULACION DE IMAGENES

•  Aprenderá el uso de un bitmap vs vector.

•  Diferentes modos de importar un archivo.
•  Importar un archivo de photoshop modo nativo.
•  Importar un archivo de illustrator modo nativo.
•  Trazado de un bitmap.
•  Ruptura de bitmap (breaking apart)
8. Imagenes:

Vectores vs Bitmap:
Abrir carpeta 08 08_01 vector vs bitmap.fla

GRAFICOS DE MAPA DE BITS: las imágenes de mapa de bits están compuestas por puntos de color,
denominado pixeles, y la imagen completa describe la posición y valor de color de cada pixel.

BMP: (windows bitmap) mapa de bits, formato propio de microsoft, puede darse una compresión sin
péridad de calidad.
JPEG: (FORMATO DE ARCHIVO INTERCAMBIABLE)ALGORITMO DISEÑADO PARA COMPRIMIR
IMÁGENES
GIF: (FORMATO GRAFICO INTERCAMBIABLE) es un formato sin pérdida de calidad para imágenes
con hasta 256 colores.
PNG: (GRAFICO DE RED PORTABLE), formato grafico basado en un algoritmo de compresion sin
perdida para bitmaps.

GRAFICOS VECTORIALES: Los gráficos vectoriales describen las imágenes mediante líneas y curvas
denominadas vectores, que incluyen color y posición
8. Imagenes:

Importar imágenes:
Abrimos el 08_02 importing_images
FILE----IMPORT----TO STAGE (CTRL+R)
Expl. Como importar una foto
Importar una secuencia de fotos (seleccionando unicamente la primera)
Propiedades de bitmap--- EN LIBRERIA

Importar desde PSD.

Abrimos el 08_04_importing_psd.fla--- e importamos snowboards.psd
Y las carpetas las activamos como MOVIECLIP

Importar desde illustrator:

Abrimos el 08_05_importing_Ai.fla y abrir el logo.ai

Tracing de bitmaps:
Abrimos de la carpeta 08_06 la imagen de bg.jpg
MODIFY---BITMAP---TRACE BITMAP

MODIFY---SHAPE---OPTIMIZE
8. Imagenes:

Breaking apart:
Abrimos el archivo 08_07_breaking apart_bitmaps
A la foto de arriba le hacemos un trace bitmap
MODIFY---BITMAP—TRACE BITMAP
Y la estiramos

Y a la de abajo:
MODIFY---- BREAK APART
Y la estiramos

y si agregamos un
Cuadro, con esta última imagen
Podemos copiar el relleno
8. REPASO:

•  Cual es la diferencia entre un mapa de bits y un vector.

•  Cuales son las formas de importar un archivo.
•  Cuales son las ventajas de importar un archivo nativo en psd o .ai
•  Cual es la función de trace bitmap.
•  Cual es el menu de break_apart
Lo que usted aprenderá de este tema:

TEMA: ANIMACION

•  Aprenderá la animación de “animacion de forma”– shape tweening

•  Uso de hint en transformación de formas.
•  Animación de degradado en formas.
•  Animación de movimiento “motion tween”
•  Copiado, pegado de movimientos.
•  Guias de movimientos “motion guides”
•  Controles de movimientos.
9.Animación:

Animación de forma (shape tweening)

Dibujar una forma y convertirla en MOVIECLIP.
Agregar keyframes e ir manipulando con la hta. Subseleccion (también podemos cambiar color/
degradado)
Y aplicar animacion de “shape”.

Animación de transformación de forma:

En un keyframe dibujar un cuadro---- en frame 10- dibujar un ovalo.
Agregar control de hint

MODIFY—SHAPE---AD SHAPE HINT

Agregar un control e ir a la otra figura y mover el control
Agregar un 2º control e ir a la otra figura y manipular.

Animacion de degradado de formas:

Crear un movieclip y rellenar con degradado
Animar con “animacion de forma”

Animacion de movimiento:
Hacer un objeto a movie clip y aplicar “motion tween”
--ver que se puede manipular opacidad, color, etc– en panel de propiedades.
9.Animación:

Copiado y pegado de movimiento:

Realizar una animacion de una pelota movieclip.
Agregar un mc que sea un cuadrado.
-- seleccionar solo el área de animacion en el timeline, y en el cuadro seleccionar esa misma area .
CLIC_BTN_DER-TIMELINE---COPY MOTION.

Movimiento de guias (motion guides):

Realizar el MOVIECLIP de una mariposa ó mosca
CLIC EN EL ICONO DE “ADD_MOTION_GUIDE”, EN EL TIMELINE
--DESPUES TRAZAMOS LA LINEA, PARA QUE SIGA LA ANIMACION

Edición de curvas de animación:

Se puede realizar animación controlada, mediante el uso de EASE
9. REPASO:

•  Cual es el modo de realizar una animacion de forma?

•  Para que se utilizan los “hints”
•  Cual es la diferencia entre animación de movimiento y animacion de forma
•  Describe la manera de hacer movimiento con guias.
Lo que usted aprenderá de este tema:

TEMA: USO DE TEXTO

•  Aprenderá los diferentes tipos de texto.

•  Animación aplicada a texto.
•  Busqueda inteligente de texto.
10. Uso de Texto:

TIPOS DE TEXTO:
Existen 3 tipos diferentes de texto.
Texto estatico: solo se puede crear con la hta. Flash.
Texto dinamico: incluye contenido que se carga desde un origen externo, como archivo de texto, xml.
Texto de entrada: cualquier texto introducido por un usuario.

APARIENCIA DE TEXTO:
Se recomienda, no estirar el texto, y que se adapte al tipo de texto deseado.
Revisión de ortografia:
TEXT—CHECK SPELLING

ANIMACIÓN DE TEXTO:
Escribir texto.
Convertir en movieclip.
- convertir en break_apart (ctrl+b)
MODIFY—TIMELINE—DISTRIBUTE TO LAYERS (SHIFT+CTROL+D)
En ventana de TRANSFORM--- dar 0%, al 1 frame.
Seleccionar todas la capas del frame 1 y aplicar MOTION TWEEN- en panel de propiedades.

Busqueda inteligente:
EDIT—FIND AND REPLACE (CTROL+F)
10. REPASO:

•  Cuántos tipos de texto hay en flash.

•  Cual es el menu y shortcut de “revisión de ortografía”
•  Cuál es el menu de busqueda inteligente y su shortcut.
Lo que usted aprenderá de este tema:

TEMA: FILTROS Y MODOS DE MEZCLA (BLEND)

•  Aprenderá el uso de filtros.

•  Diferentes tipos de filtros.
•  Uso de mezclas (blend)
•  Tipos de mezclas.
11. Filtros y modos de mezcla (blend):

Uso de filtros:
Abrir el archivo 11_01_using_filter_all.fla
Y ver los filtros aplicables– en panel de propiedades.

Animación de filtros:
Abrir archivo: 11_03_animatig_filter.fla
Realizar la guia para la animacion de “boarder”
y también de la sombra.
-- aplicar DROP SHADOW
Strenght= 50%
Quality= high
Activar casilla: HIDE OBJETCT.

Y hacer la sombra realista:

Ajustando a acercamiento, posicion, etc.
11. Filtros y modos de mezcla (blend):

Tipos de mezclas (blend):

Abrir el archivo 11_01_using_filter_all.fla

NORMAL: aplica color de la manera habitual, sin interacción.

CAPA: permite apilar clips de pelicula uno sobre otro sin alterar los colores.
OSCURECER: sustituye únicamente las áreas que sean claras que el color de la mezcla. Las zonas
más oscuras no experimentan cambios.
MULTIPLICAR: multiplica el color base por el color de mezcla, con lo que obtienen colores más
oscuros.
ACLARAR: sustituye los pixeles que sean más oscuros que el color de mezcla, las zonas más claras
no experimentan cambios.
PANTALLA: multiplica el inverso de color de mezcla por el color base, se obtiene un efecto de
decoloración.
SOLAPAR: multiplica o trama los colores, dependiendo de los colores base.
LUZ FUERTE: multiplica o filtra los colores según el color mezcla, efecto similar al que se obtiene
enfocando un cañon de luz hacia el objeto.
DIFERENCIA: resta el color de mezcla, efecto semejante a color negativo.
SUMAR: efecto de disolución de aclarado entre dos imágenes.
RESTAR: efecto de disolución de oscurecimiento de dos imágenes.
INVERTIR: invierte el color base.
ALFA: aplica una mascara alfa.
BORRADO: elimina todos los pixeles del color base.
10. REPASO:

•  Cuántos tipos de filtros existen.

•  Menciona los tipos de mezclas.
Lo que usted aprenderá de este tema:

TEMA: USO DE COMPONENTES

Lo que usted aprenderá de este tema:

TEMA: INTEGRACIÓN DE AUDIO

Lo que usted aprenderá de este tema:

TEMA: INTEGRACIÓN DE VIDEO

Lo que usted aprenderá de este tema:

TEMA: ACTION SCRIPT