Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Unidad 1 Flash
Unidad 1 Flash
DE ADOBE FLASH
PROFESSIONAL CS5.5
UNIDAD 1.
CONCEPTOS FUNDAMENTALES
Unidad 1
En esta unidad se darn a conocer los conceptos bsicos de diseo del programa Adobe
Flash Professional CS5.5. Se mostrar paso a paso como instalar y ejecutar el programa
en el equipo de trabajo; de igual manera se har una introduccin sobre los archivos y el
tipo de lenguaje que este software utiliza.
Temas de la Unidad 1
Tiempo de
Formacion
Tema 1.
Conceptos y
usos de Adobe
Flash
Tema 2.
Conceptos
bsicos de
diseo
Tema 3.
Conceptos de
animacin
Tema 4.
Requerimientos
para trabajar
con Adobe
Flash
Professional
CS5.5 e
instalacin del
programa
2 Horas
Tema 5.
Familiarizacin
con el Espacio
de Trabajo
2 Horas
2 Horas
2 Horas
2 Horas
Qu es Adobe Flash?
Flash es un software cuya funcin es el desarrollo de contenidos interactivos multimedia,
basado en lenguaje script y de vectores, este permite realizar todo tipo de aplicacin o
contenido animado. En principio fue desarrollado por la empresa Macromedia y en la
actualidad Adobe se encarga de su distribucin.
Plataforma Flash
Flash hace parte de la llamada Plataforma Adobe Flash, esta permite crear aplicaciones
enriquecidas para distintos medios como celulares de ltima tecnologa y equipos de
cmputo, ya sea en la web o en aplicaciones nativas de escritorio.
La plataforma flash es un conjunto integrado de tecnologas, utilizadas para crear y
ofrecer contenido, se conforma principalmente por clientes, herramientas, servicios y
servidores.
Los elementos con mas relevancia de esta Plataforma son : Flash Player, utilizado en el
desarrollo Web y Adobe Air, empleado para aplicaciones de escritorio.
i
Otras aplicaciones de gran utilidad en el desarrollo de contenidos son: Flash Builder, Flash
catalys y la primordial, en la que se basa este curso, Flash Professional. Los otros
elementos de la Plataforma Adobe son servidores y servicios que brindan herramientas
para enriquecer distintos temas generados por estos softwares.
Aplicaciones y usos de Flash
Flash permite dibujar y animar en dos dimensiones. Este incluye sonido, video y por
supuesto la posibilidad de interactuar con una diversidad de contenidos.
Flash es til en muchas aplicaciones como por ejemplo: animaciones para diferentes
dispositivos, entornos de elementos para la Web, presentaciones multimedia en CD y
juegos; tambin posee un gran futuro, gracias a su capacidad para crear grficos de alta
calidad y de poco peso. Ademas su nueva caracteristica le permite exportar a la web en
formato html5 , algo que planea ser mejorado e implementado en prximas versiones.
Cosas que se pueden hacer con FLASH:
Creacin de imgenes
Una de las aplicaciones a sealar es la posibilidad de exportar a cualquier parte una
animacin creada con Flash a una imagen esttica. Las extensiones en las que se puede
exportar desde Flash son: JPEG, GIF, PNG, PICT [Macintosh] y BMP.
Pixeles o vectores
El pixel es un elemento muy pequeo que compone las imgenes del mapa de bits,
tambin conocidas como bitmaps. Cada pixel contiene informacin con respecto al color y
a su posicin en pantalla. Un mapa de bits es una matriz integrada por la ubicacin de
pixeles, mediante coordenadas cartesianas [x, y] mas su color. Al agrandar una imagen de
este tipo, se ve una cuadricula compuesta por puntos rectangulares de color, stos son los
pixeles. Entre ms pixeles haya por unidad de espacio, mayor es la calidad de la imagen y
el tamao del archivo.
Documento de Flash
El documento creado por Flash est integrado por un documento padre, este permite
dibujar y componer una escena de animacin. Despues la pelcula que se exporta permite
ser reproducida mediante el reproductor de Flash (Flash Player) o un reproductor de video.
La extensin del documento padre es .FLA. La pelcula exportada, el trabajo final tiene la
extensin .SWF.
Algunos formatos de imgenes de mapa de bits son: BMP, PSD, XCF, JPEG, GIF, TIF,
PNG.
Un vector es un objeto digital definido de manera matemtica. Los vectores se reunen al
formar lneas y formas individuales. Estos grficos se caracterizan por ser trabajables, ya
que no se ajustan a un nmero determinado de unidades fijas, sino a frmulas
matemticas internas de formaciondel grfico, de esta forma, se puede agrandar una
imagen sin que aumente el tamao del archivo y sin perder definicin.
Algunos formatos de imgenes de vectores son: CDR [Corel Draw], SWF [pelcula Flash],
AI [Illustrator].
Algunos formatos de imgenes con informacin vectorizada y pixeles son: PICT
[Macintosh], WMF [Windows], PSP [Paint Shop Pro], EPS [Encapsulated Postcript], PDF
[Adobe Acrobat Reader], FLA [Flash].
Presentaciones multimedia
Son composiciones con imgen, sonido y video que pueden tener animacin. Las
composiciones multimedia suelen contener scripts o pequeos programas que ejecutan
distintos eventos como: conexiones a internet, envio de correos electronicos, chats, etc.
Adems de Internet, Flash permite crear CDS multimedia, algo muy til para armar
catlogos de productos por ejemplo.
Flash es capaz de incluir un reproductor, a fin de poder visualizar el contenido de la
animacin, sin necesidad de poseer el programa Windows Media Player.
Animaciones
Una animacin es una secuencia integrada por varias imgenes que poseen cambios en
un lapso de tiempo determinado. En las animaciones se utiliza lnea de tiempo, capas,
interpolacin, etc.
Juegos
Gracias al lenguaje Actionscript que viene incluido en el Adobe Flash, el rango de
posibilidades a la hora de realizar un juego o una aplicacin interactiva es muy alto, ya que
lo nico necesario es un conocimiento bsico de programacin.
Flash ofrece varias herramientas en el panel de edicin Actionscript, as como la
incorporacin de acciones automatizadas que simplifican notablemente los proyectos
desarrollados.
Sitios Web
Flash es ampliamente utilizado para desarrollar sitios web completos o partes de ellos. Sin
embargo existe controversia por el uso del software web (medida de uso de un
Figura 2.
Introduccin al diseo
Un buen diseo es clave para el xito de cualquier producto. Cuando se tiene un negocio y
se desarrolla una nueva lnea de productos para competir contra empresas o sitios
reconocidos en la red, tener un sitio web con ubicacin fsica real y con calidad en el
diseo es algo crucial para tener xito.
Afortunadamente la Web suele ser justa con personas creativas y dedicadas. Un sitio Web
puede competir directamente con los grandes, sin necesidad de gastar ms de 50 Millones
de pesos. Todo lo que se necesita es ingenio y utilizar las herramientas adecuadas, aqu
se desentraarn los misterios del diseo en flash, lo que impulsar la posible creacin de
diseos innovadores.
Como las aplicaciones de Flash crecen en tamao y alcance, hay que dominar las
tcnicas que permiten llamar la atencin. Por qu es clave para el xito un buen diseo?
La respuesta es simple, la competencia. Si el proyecto en Flash es slo uno de los
millones en el mercado y lo que se quiere es sobresalir, ms vale que este propsito se
vea y funcione de manera perfecta.
Esta seccin cubre los cuatro principios bsicos de un buen diseo:
-
Sencillez
Facilidad de uso
Flexibilidad
Consistencia
Resulta paradjico pero es ms fcil crear un diseo complejo y confuso, que uno simple y
utilizable que tenga sentido rpido para el cliente y sea lo suficientemente flexible para
crecer con las necesidades del usuario.
La coherencia en el diseo del producto creado a travs de Adobe Flash, es clave para
hacer sentir cmodos a los clientes.
Al dominar estos cuatro principios de diseo, el camino de creacin para diversos
proyectos ser glorioso, ya que las personas se sentirn cmodas y querrn volver a
contratarle.
Sencillez
La simplicidad es una muy buena idea. Por qu? Debido a que un diseo complejo
puede confundir el mensaje. Flash libera las limitaciones del diseo tpicamente asociadas
con HTML y CSS. Esto quiere decir que Flash tiene ms poder sobre el sitio web y sobre
las distintas aplicaciones.
Flash no se limita al trabajo con tablas para crear un diseo, se puede utilizar cualquier
fuente que desee, mediante la incorporacin directa en la pelcula de Flash. Tampoco se
tiene que luchar con la ubicacin de objetos o estar preocupado porque el sitio se va a ver
diferente en un navegador distinto, gracias a Flash Player, slo es necesario crear un
diseo y este funcionar bien en todas partes.
Tendr que practicar para generar un diseo de buen aspecto, esttico, armnico y lo ms
importante, sencillo.
Usabilidad
De las millones de pginas que habitan en la Web, se decide volver a sitios favoritos, ya
que son tiles y siempre tienen lo que se requiere.
Para crear un diseo utilizable, es necesario prestar atencin especial a la disposicin de
la pantalla en general, la navegacin y la marca.
Cuando se observa una pelcula de Flash, la primera impresin se basa en el diseo de
conjunto o diseo de pantalla general.
Cmo crear un diseo de pantalla general para un tipo de cliente? En Europa Occidental
y Amrica, se lee de derecha a izquierda, de arriba abajo, en los pases asiticos, es todo
lo contrario. Se trata de una cuestin cultural y se tiene que negociar con el cliente cuando
se inicie el trabajo de diseo.
A medida que construye el servicio, tenga en cuenta cmo los usuarios encuentran el
contenido o cmo "navegan" en la aplicacin. Hay muchas maneras de crear sistemas de
navegacin en un explorador Web. En muchos casos se usa "adelante" y "hacia atrs",
para as generar desplazamiento a travs de las pginas, sin embargo, una aplicacin de
software puede utilizar los mens en la parte superior de la pantalla, lo que llevar a
distintas partes de la aplicacin.
En el caso de las aplicaciones pequeas, se requiere un mnimo de clics para interactuar
con el usuario del sistema de navegacin, este debe ser visible, coherente y claro.
Figura 3.
expresin personal, pero psimo para los empleados que usan la aplicacin, ya que
existirn dificultades a la hora de encontrar la informacin correcta.
Plantillas Flash
Una buena manera de empezar es utilizar una plantilla. Existen sitios comerciales que
venden plantillas base para crear proyectos de Flash, es necesario profundizar e investigar
con otros usuarios, para as saber si en verdad esa plantilla base, va a ser efectiva para el
mencionado proyecto.
Se puede hacer una bsqueda en Internet con las palabras templates, plantillas web o
animacin Flash.
La lnea de base
Al crear un diseo para pelculas de Flash, se debe tener en cuenta; ser simple, til,
flexible y coherente. El objetivo final es ganar nuevos clientes.
Flash posee un gran potencial como herramienta de desarrollo en el campo Web para
Intranets e Internet, en los prximos textos se mostrarn algunos lineamientos.
Rompiendo la pantalla
.
Al crear un proyecto Web, se debe emplear una estrategia de diseo, donde los elementos
de la pantalla, contenido y navegacin, se distribuyan de manera lgica. Este proceso se
denomina "distribucin por bloques".
Cmo trabajar en bloques?
La distribucin por bloques es un concepto que se utiliza para casi cualquier aplicacin o
sitio Web, esto implica dividir el diseo en bloques especficos, de manera que se
reconozcan los contenidos organizados, como navegacin, publicidad y marca. En el sitio
web del SENA www.sena.edu.co, se puede observar esta distribucin en los bloques
marcados con rojo.
Figura 4.
El Sena rene una gran cantidad de contenido en la pantalla, as el sitio es fcil de usar.
Esto es porque el diseo est dividido en secciones de fcil reconocimiento.
Se puede ver las reas de contenido en rojo en la parte superior, tiene navegacin del
sitio, el banner con el logo a la izquierda cumple la funcin de cabecera, debajo de la
navegacin hay una presentacin automtica de fotografas, mas abajo en el centro est
el contenido principal del sitio que se divide en tres columnas principales: la categora de
navegacin, el contenido y la oferta de todos los servicios. As aunque no se ve, est
tambin el contenido del pie de pgina del sitio como un bloque de contenido en la parte
inferior del sitio web.
Regla de oro: Cuando realice la distribucin de bloques para un sitio web, mantener el
diseo simple, es la clave, esto permite a los clientes encontrar aquello que buscan lo ms
pronto posible.
10
11
Figura 5.
12
13
Narracin no debe contar lo que se ve en la pelcula, sino aportar informacin sobre lo que
se va a ver, se debe tratar que las imgenes duren ms tiempo que el texto.
-Efectos de video, subttulos: Se aaden ttulos, efectos o transiciones dependiendo del
clip a realizar.
- Msica: Se especifica la banda sonora o grupo musical del clip.
Figura 6.
Figura 7.
14
15
Figura 8.
16
Figura 9.
7. En la parte inferior aparece una ventana horizontal, dar clic en el triangulo selector
pequeo junto a la palabra Save (guardar) y escoger Save and Run (guardar y
ejecutar).
17
Triangulo
Selector
Figura 10.
8. Aparece una barra de progreso que indica que se est descargando el asistente de
instalacin.
9. Posteriormenteaparece la ventana de inicio de asistente de instalacin, all se puede
seleccionar la ubicacin en donde se quiere instalar la aplicacin. Tambin podr crear,
si as lo desea, un acceso directo en el escritorio, esto con el fin de poder ejecutar la
aplicacin cuando la instalacin finalice. Dejar los valores que estn seleccionados y
dar clic en Continuar.
Figura 11.
10. Aceptar los trminos del contrato para la instalacin y uso de Adobe Flash
11. Aceptar los trminos y condiciones de uso.
18
10
11
Figura 12.
12
14
13
Figura 13.
19
15. Luego de haber entrado en la Instalacin con el ID de usuario de Adobe, dar clic en
Seleccionar productos.
15
Figura 14.
16
16
Figura 15.
17. Dar clic en el triangulo de la derecha hasta visualizar Adobe Flash Professional CS5.5
20
17
Figura 16.
18
Figura 17.
21
20
21
19
Figura 18.
19
22
22
23
Figura 19.
24
Figura 20.
23
25
26
Figura 21.
27. Seleccionar Instale este producto como una prueba; o si ha comprado la licencia de
Adobe Flash Professional, seleccionar Proporcione un numero de Serie y a
continuacin digitarlo.
28. Clic en Siguiente.
27
28
Figura 22.
24
29
30
31
Figura 23.
32. Verificar que est marcada la opcin ADOBE FLASH PRO CS5.5
33. En Ubicacin dejar la ruta que est predefinida por C:\Program Files\Adobe.
34. Clic en Instalar.
32
33
34
Figura 24
25
35
Figura 25.
36. Cerrar las aplicaciones que nos solicita el asistente de instalacin y dar clic en
CONTINUAR.
36
35
Figura 26
26
37
.
Figura 27
27
39
38
40
39
41
Figura 28.
28
Figura 29.
Figura 30.
29
Los principales documentos de Flash son los de formatos FLA y SWF. FLA almacena
contenido de animaciones y cdigo, es el documento fuente principal de una presentacin
en Flash, mientras que SWF, es el archivo de pelcula donde se almacena toda la
animacin final, luego de ser compilada por el software. La presentacin final del archivo
SWF es interpretada y visualizada a travs de Adobe Air o Flash Player.
Hay otros tipos de archivo, est AS que almacena cdigo Action Script en archivos
externos, est JSFL que almacena cdigo Java Script y est el formato de video FLV para
pelculas que se interpretan a travs de herramientas de Flash.
30
31
Figura 33.
Escenario
Lnea de tiempo.
Panel de propiedades.
Panel de herramienta.
Barra de aplicacin.
Barra de documentos.
32
El escenario
Es un rectngulo blanco que representa la zona de visualizacin del contenido, todos los
objetos que se encuentran en esta zona, sern visibles en la presentacin final del
contenido multimedia. La zona gris conocida como el tablero o cartn de trabajo, oculta los
objetos para que no se visualicen en el contenido final.
La lnea de tiempo
Se encarga de controlar el flujo de animaciones en el trascurso del tiempo, utiliza una
combinacin de capas y fotogramas para controlar las visualizaciones por medio de la
cabeza lectora, est es la encargada de indicar en qu posicin se encuentra la lnea de
tiempo y tambin permite visualizar el contenido disponible en los fotogramas, de acuerdo
a la posicin.
La lnea de tiempo se conforma por:
1. Cabeza lectora.
2. Fotogramas.
3. Capas.
4. Botones papel cebolla.
5. Indicador fotograma actual.
6. Indicador velocidad fotograma.
7. Indicador tiempo trascurrido.
8. Crear capa.
9. Crear carpeta.
10. Eliminar.
11. Mostrar u ocultar.
12. Bloquear o desbloquear.
13. Mostrar contornos.
Figura 34.
Entre los tipos de fotograma que usa la lnea de tiempo, se encuentra el fotograma clave,
este representa elementos principales con caractersticas definidas; mientras que el
33
fotograma simple, es una extensin del fotograma clave que permite al elemento ser
ubicado en la lnea de tiempo.
El panel de propiedades
Tambin conocido como inspector de propiedades permite acceder a las configuraciones y
propiedades de los elementos de Flash Professional de una forma rpida. Las opciones
que se encuentran en el panel dependen del elemento que se seleccione, ya sea un objeto
de Flash o una herramienta. Para visualizar el panel de propiedades de forma rpida,
utilizar el teclado y presionar la combinacin de teclas Ctrl ms la tecla F3.
El panel de herramientas
Es el panel que contiene las herramientas para el diseo y retoque de los contenidos de
Flash Professional.
La barra de aplicacin
Se encarga de almacenar la barra de mens, el men de seleccin de rea de trabajo, el
campo de bsqueda, men de servicios CS live y botones del sistema (minimizar,
maximizar y cerrar).
La barra de documentos
Muestra las fichas o pestaas de los documentos que se estn trabajando en Flash
Professional, junto con la barra de edicin de cada documento.
34
REFERENCIAS
35