1. David Giovanny Lombana Sayo11-01

2. Flash Professional CS5 es una potente herramientadesarrollada por Adobe que ha superado lasmejores expectativas de sus creadores. Flash fue creado con el objeto de realizaranimaciones y diseos vistosos para la web, ygrficos interactivos. Los motivos que han convertido a Flash en elprograma elegido por la mayora de los diseadoresweb profesionales y aficionados son varios. Veamospues, porque es interesante Flash Pro CS5. 3. Aunque su uso ms frecuente es el de crear animaciones (a lolargo de este curso veremos lo sencillo que puede resultar) sususos son muchos ms. Son tantos, que todos los diseadoresweb deberan saber utilizar Flash. Durante mucho tiempo, Flash consigui hacer posible lo quems se echa en falta en Internet: Dinamismo, y con dinamismono slo nos referimos a las animaciones, sino que Flash permitecrear aplicaciones interactivas que permiten al usuario ver laweb como algo atractivo, no esttico. Con Flash podremoscrear de modo fcil y rpido desde animaciones simples paralograr algunos efectos visuales, hasta aplicaciones complejas,como juegos . Adems sus desarrolladores estn apostando muy fuerte porActionScript, el lenguaje de programacin Flash. A cadaversin se mejora y ofrece un abanico de posibilidades cadavez mayor, por lo que adems de dinamismo, Flash nos ofrecela posibilidad de ser la plataforma para aplicaciones web de unmodo real. 4. Adobe suele integrar todos sus productos en una suite nica en laque prima, sobre todo, la compatibilidad entre ellos. As la compaase desmarca del resto ofreciendo un paquete de aplicaciones muycompletas como hemos ido viendo ao tras ao, que son capacesde interactuar entre ellas y nos ofrecen la posibilidad de reutilizarproyectos creados con un programa en otro. De hecho, podemosusar herramientas ms potentes de dibujo, como Illustrator, paracrear nuestros grficos, y despus animarlos con Flash. 5. Motor de texto Text Layout Framework.Flash CS5 ha cambiado profundamente el motor de texto queemplea. En nuevo motor TLF, incluye bastantesmejoras, entre las que podemos destacar las siguientes: Nuevos estilos de carcter y prrafo. Se pueden aplicar efectos y atributos sobre el texto sinconvertirlo a un clip de pelcula. El texto pude fluir entre varios contenedores asociados.El panel Fragmentos de cdigo. Este panel nos permite insertar rpidamente el cdigoActionScript 3 de las acciones ms comunes. Adems, podemos emplearlo para almacenar nuestro propiocdigo, y as poder reutilizarlo cmodamente. 6. El tiempo de carga. Mientras que una pgina HTML puede ocuparnos 10-20KB como media, una animacin Flash ocupa mucho ms. Evidentementedepende del contenido que tenga, pero suelen superar los100 KB confacilidad, y si adems incorpora sonidos es fcil que la cifra se dispare. Alocupar ms espacio, el tiempo que tardan estar visible el contenido Flash esmayor y no todos los visitantes estn dispuestos a esperar... simplemente, seirn a otra pgina. Los buscadores. Son capaces de indexar el contenido de nuestra pgina, eltexto, pero no el contenido del Flash, ya que no lo pueden leer, lo queafectar negativamente al posicionamiento de la pgina. Y hoy en da escrucial para una web encontrarse bien posicionada. No obstante, losbuscadores trabajan para solucionar este problema, pero de momento al mejorforma de solucionarlo es crear un diseo paralelo sin Flash, lo que aumenta eltrabajo. Flash requiere de plugins para poder visualizarse, y el hecho de no tenerlosinstalados, o de que un navegador tenga los scripts deshabilitados porseguridad, impedirn la visualizacin del Flash. Este plugin lo suelenincorporar la mayora de navegadores, es gratuito y se puede instalardesde aqui de forma muy intuitiva, pero siempre habr usuarios que prefieransalir de nuestra pgina si tienen que instalar "algo raro". 7. Compatibilidad con distintos dispositivos. Cada vez es ms frecuenteacceder a la web con telfonos mviles, SmartPhones y Tablets, yalgunos de ellos no soportan Flash (como los Android anteriores a laversin 2.2). Flash es una tecnologa propietaria de Adobe, por lo que su futurodepende de lo que esta compaa quiera hacer con l. Otro aspecto a tener en cuenta es la usabilidad de las pginas Flash,a veces se cae en la tentacin de dar demasiada importancia aldiseo y olvidarse de que la pgina debe ser fcil de usar, aunque esms un error de diseo que del propio Flash. Tendencia a su desuso en la web. Con la llegada de HTML5, sesolventan muchas de las carencias de las pginas tradicionales quenos obligaban a usar Flash. Por lo que su uso deja de tener tantosentido. De hecho, Flash CS5 incluye una herramienta para exportarcontenidos Flash a HTML5. 8. La web se vuelve muy vistosa y atractiva, adems de aadirle msinteractividad. El aspecto visual es muy importante para laweb, ya que al visitante, sobre todo al principio, "le entra por losojos". Con un poco de prctica, el desarrollo con Flash sevuelve rpido. Flash permite comportamientos que de otra forma no podramoslograr. Compatibilidad con navegadores. Uno de los principalesproblemas en el diseo web es que el resultado no tiene por quverse igual en todos los navegadores. Con Flash, nos aseguramosde que lo que hemos creado es exactamente lo que se ver. Por tanto, se hace necesario cuando lo que se necesita es que elusuario pueda interactuar completamente con el contenido. 9. Una de las caractersticas principales de Flash es su sencillez, esta sencillez en suutilizacin permite crear animaciones de un modo efectivo y rpido. Pongmonos en situacin, supongamos que queremos crear una animacin en la que unapelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer untrabajo de horas, pero nada ms lejos de la realidad.Veamos cmo Flash nos lo pone fcil. En este apartado no pretendemos ensear cmo crear una animacin Flash (pues eso sever ms adelante), el objetivo es que entendamos cmo crea Flash las animaciones y deque modo nos facilita el trabajo. A primera vista, lo lgico parece ser dibujar la pelota en cada instante delmovimiento, de modo que cuantos ms instantes dibujemos, ms real parecer elmovimiento. Pues bien, con Flash bastar con crear 3 fotogramas: en el primerodibujaremos la pelota en el instante inicial (arriba del todo), en el segundo se dibujar lapelota en el momento de tocar el suelo y en el tercero la pelota volver a estar arriba (enrealidad este tercer fotograma no har falta crearlo, pues bastar con copiar el primero).Por tanto, vemos que el trabajo ms largo (dibujar los objetos) ya est hecho. 10. Ahora, se determina el tiempo quedurar cada movimiento (es decir, eltiempo que transcurre entre losinstantes en los que la pelota est arribay abajo) y por ltimo se le indica a Flashque cree una animacin de movimientoentre estos fotogramas. Fcil verdad? En esta versin de Flash an se hafacilitado ms la realizacin deanimaciones de movimiento comoveremos en el tema correspondiente. 11. Flash CS5 cuenta con unentorno o interfaz de trabajode lo ms manejable eintuitiva. Adems, tiene laventaja de que es casiidntica a la de otrosprogramas de Adobe(Photoshop, Dreamweaver,Illustrator...), todo esto hacems fcil aprender Flash y msrpido su manejo y dominio.Esto es lo que nosencontraremos al abrir FlashCS5 por primera vez: 12. La Barra de Mens tiene como propsito facilitar el acceso a lasdistintas utilidades del programa. Es similar a la de cualquier otroprograma de diseo web o grfico, aunque tiene algunasparticularidades. Veamos los principales Submens a los que sepuede acceder: Archivo: Permite crear nuevos archivos, abrirlos, guardarlos...Destaca la potencia de la utilidad Importar que inserta en la pelculaactual casi todo tipo de archivos (sonidos, vdeo, imgenes e inclusootras pelculas Flash), o la de Configuracin de Publicacin desdedonde se pueden modificar las caractersticas de la publicacin.Tambin permite configurar la impresin de las pginas, imprimirlas... Edicin: Es el clsico men que te permite Cortar, Copiar,Pegar... tanto objetos o dibujos como fotogramas; tambin permitepersonalizar algunas de las opciones ms comunes del programa. Ver: Adems de los tpicos Zooms, te permite moverte por losfotogramas y por las escenas. Tambin incluye la posibilidad de crearuna cuadrcula y unas guas. Esto se puede seleccionar desde lossubmens Cuadrcula y Guas desde donde tambin se puedenconfigurar sus opciones. Insertar: Permite insertar objetos en la pelcula, as como nuevosfotogramas, capas, acciones, escenas... 13. Modificar: La opcin Transformar permite modificar los grficos existentesen la pelcula, y la opcin Trazar Mapa de Bits convierte los grficos en mapasvectoriales (este tema se tratar ms adelante). El resto de opciones permitemodificar caractersticas de los elementos de la animacin Suavizar,Optimizar o de la propia pelcula (Capa, Escena ...). Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se trataren profundidad. Comandos: Permite administrar los Comandos (conjunto de sentenciasalmacenadas que permiten emular lo que un usuario pueda introducir en elentorno de edicin) que hayamos almacenado en nuestra animacin, obtenerotros nuevos de la pgina de Macromedia o ejecutar los que ya tengamos. Control: Desde aqu se modifican las propiedades de reproduccin de lapelcula. Reproducir, Rebobinar, Probar Pelcula.... Depurar: Aqu encontraremos las opciones de depuracin de la pelcula quete ayudaran a encontrar errores de programacin en ActionScript, entre ellosse encuentran Entrar, Pasar, Salir, Continuar... Ventana: Este men, adems de las opciones clsicas acerca de cmodistribuir las ventanas, incluye accesos directos a todos los paneles y tambinla posibilidad de crear tus propios Espacios de Trabajo, guardarlos, cargarlos,etc. Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Adobe,desde el manual existente, hasta el diccionario de Action Script, pasando portutoriales, lecciones guiadas etc... 14. 1) Los Fotogramas (frames) que vienen delimitados por lneasverticales (formando rectngulos) 2) Los Nmeros de Fotograma que permiten saber qu nmero tieneasignado cada fotograma, cunto dura o cundo aparecer en lapelcula. Adems, en la parte inferior hay herramientas para trabajar con Papelcebolla e informacin sobre el Nmero de Fotograma actual (1 en laimagen), la Velocidad de los Fotogramas (24.0 en la imagen) y el Tiempode pelcula transcurrido (0.0s en la imagen). A nivel conceptual, la Lnea de Tiempo representa la sucesin deFotogramas en el tiempo. Es decir, la pelcula Flash no ser nada msque los fotogramas que aparecen en la Lnea de tiempo uno detrsde otro, en el orden que establece la misma Lnea de tiempo. 15. El concepto de Capa es fundamental para manejarFlash de forma eficiente. Dada la importancia deestas, se le dedicar un tema completo. Anas, veamos a grandes rasgos qu son las capas. Una Capa se puede definir como una pelculaindependiente de un nico nivel. Esdecir, una capa contiene su propia Lnea deTiempo (con infinitos fotogramas). Los objetos que estn en unadeterminada capa comparten fotograma y portanto, pueden "mezclarse" entre s. Esto esinteresante a menudo, pero otras veces esconveniente separar los objetos de modo que nointerfieran entre s. Para ello, crearemos tantascapas como sea necesario. El uso de mltiplescapas adems, da lugar a pelculas bien ordenadas yde fcil manejo (es conveniente colocar los elcdigo ActionScript en una capa independientellamada "acciones", por ejemplo). Las ventajas ydesventajas de usar capas se ver en la unidadreferente a Capas. 16. A continuacin veremos las diferentes partes que conforman el rea de trabajoempezaremos con la ms importante: el Escenario. Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelculaque estemos realizando. El escenario tiene unas propiedades muy importantes, ya quecoinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic conel botn derecho sobre cualquier parte del escenario en la que no haya ningn objetoy despus sobre Propiedades del documento: Aade metadatos a tus archivos para una mejor inclusin de estos en los motores debusqueda rellenando los campos de Ttulo y Descripcin. Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es de 1 x 1 px(pxeles) y el mximo de 2880 x 2880 px. Unidades de Regla: Unidad que se emplear para medir las cantidades. Coincidir: Provocan que el tamao de la pelcula coincida con el botn seleccionado(tamao por defecto de la Impresora, Contenidos existentes o los elegidos comoPredeterminados) 17. Los Paneles son conjuntos de comandos agrupados segn su funcin (porejemplo, todo lo que haga referencia a las acciones, ir en el Panel Acciones). Sumisin es simplificar y facilitar el uso de los comandos. Estos paneles o ventanas se encuentran organizados en el lateral derecho del reade trabajo. Pudindose expandir o minimizar con un clic de ratn. Si no estn visibles en el lateral derecho, puedes visualizarlos desplegando elmen Ventana y haciendo clic sobre el nombre del panel que quieras mostrar. Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propiasdisposiciones de paneles, para que si en algn momento el entorno se vuelve unpoco catico puedas recuperar tu configuracin elegida desde el men Ventana. Para ello debers acceder a la opcin Ventana Espacio de trabajo Nuevoespacio de trabajo y asignar un nombre a nuestro nuevo espacio. 18. Ahora slo bastar darle un nombre a la disposicin y ser accesible desde el mismoelemento de men Espacio de trabajo en cualquier momento. Todos los paneles se estudiarn en profundidad a lo largo del curso. Anas, vamos a nombrarlos y a resumir las funciones de la mayora de ellos. Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til. Panel Color: Mediante este panel creamos los colores que ms nos gusten. Panel Muestras: Nos permite seleccionar un color de modo rpido y grfico.(Incluidas nuestras creaciones). Panel Informacin: Muestra el tamao y las coordenadas de los objetosseleccionados, permitindonos modificarlas. Muy til para alineaciones exactas. Panel Escena: Modifica los atributos de las escenas que usemos. Si an no sabes lo que son las Escenas, te lo explicamos en nuestro tema bsico . Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones anuestra pelcula. Panel Comportamientos: Permiten asignar a determinados objetos una serie decaractersticas (comportamientos) que despus podrn almacenarse para aplicarsea otros objetos de forma rpida y eficaz. Panel Componentes: Nos permite acceder a los Componentes ya construidos ylistos para ser usados que nos proporciona Flash. Los componentes son objetos"inteligentes" con propiedades caractersticas y muchas utilidades(calendarios, scrolls etc...) Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestraspelculas. Panel Respuestas: Macromedia pone a nuestra disposicin ayuda y consejosaccesibles desde este panel. Panel Propiedades: Sin duda, el panel ms usado y ms importante. Nos muestra laspropiedades del objeto seleccionado en ese instante, color de borde, defondo, tipo de trazo, tamao de los caracteres, tipografa, propiedades de losobjetos (si hay interpolaciones etc...), coordenadas, tamao etc... Esfundamental, no debeis perderlo de vista nunca. Panel Explorador de Pelculas: Nos permite acceder a todo el contenido denuestra pelcula de forma fcil y rpida 19. Cuando se disea una pgina web o una animacinel diseador pasa por muchas fases. Tras la fase de"Qu quiero crear y cmo va a ser" viene(normalmente) la fase de diseo grfico. Llevar loque ha producido tu imaginacin al papel (en estecaso al papel de Flash). No conviene engaarnos, Flash no es un programade diseo grfico, pero su potencia en este mbitoes casi tan grande como la de stos programas.Vamos a ver cmo emplear cada herramienta dedibujo para sacarle el mximo partido. 20. La Barra de Herramientas contiene todas las Herramientas necesarias para eldibujo. Algunas herramientas llevan asociados modificadores de herramientas,que permiten cambiar algunas propiedades de la herramienta, y que aparecenal final del panel de herramientas. Veamos las herramientas ms importantes: Herramienta Seleccin (flecha): . Es la herramienta ms usada de todas. Suuso principal es para seleccionar objetos, permite seleccionar los bordes delos objetos (con doble clic), los rellenos (con un slo clic), zonas a nuestraeleccin... Su uso adecuado puede ahorrarnos tiempo en el trabajo. Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Suspropiedades se vern en el tema siguiente. Herramienta Lnea: Permite crear lneas rectas de un modo rpido. Laslneas se crean como en cualquier programa de dibujo, se hace clic y searrastra hasta donde queramos que llegue la lnea recta. Una vez creada lapodemos modificar situando el cursor encima de los extremos para estirarlosy en cualquier otra parte cercana a la recta para curvarla. 21. Herramienta de forma: Permitedibujar formas predefinidascomo las que aparecen en laimagen, la ltima herramientautilizada es la que aparece comoicono en la barra deherramientas. Manteniendopulsado el icono podremosacceder a las diferentesherramientas de forma. Porejemplo: La herramienta valo permitedibujar crculos o elipses demanera rpida y sencilla. 22. Herramienta Lpiz: Es la primera herramienta de dibujo propiamente dicho. Permitedibujar lneas con la forma que decidamos, modificando la forma de estas a nuestrogusto. El color que aplicar esta herramienta se puede modificar, bien desde elPanel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra deHerramientas. Herramienta Pincel: Su funcionalidad es parecida a la del lpiz, pero por defecto sutrazo es ms grueso e irregular. Se suele emplear para aplicar rellenos. Se puedemodificar su herramientas. Herramienta Cubo de pintura: Permite aplicar rellenos a los objetos que hayamoscreado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenossi la zona no est delimitada por un borde. El color que aplicar esta herramienta sepuede modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay enla Barra de Herramientas. Herramienta Borrador: Su funcionamiento es anlogo a la Herramienta Pincel. Pero sufuncin es la de eliminar todo aquello que "dibuje". Herramienta Lazo: Su funcin es complementaria a la de la herramienta Seleccin, pues puede seleccionarcualquier cosa, sin importar la forma, (la Herramienta Flecha slo puede seleccionarobjetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo nopuede seleccionar rellenos u objetos (a menos que hagamos la seleccin a mano). Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones: .Esto es la herramienta Varita Mgica, tan popular en otros programas de dibujo. Permitehacer selecciones segn los colores de los objetos. El tercer dibujo que aparece eseste: para seleccionar Polgono. 23. Herramienta Pluma: Crea polgonos (y por tanto rectas,rectngulos...) de un modo sencillo. Mucha genteencuentra esta herramienta complicada, aunque es unade las ms potentes que ofrece Flash. Su empleoconsiste en hacer clic en los lugares que queramosdefinir como vrtices de los polgonos, lo que nosasegura una gran precisin. Para crear curvas, hay quesealar los puntos que la delimitan y posteriormentetrazar las tangentes a ellas. Con un poco de prctica seacaba dominando.Herramienta Sabeleccin: Esta Herramientacomplementa a la Herramienta Pluma, ya que permitemover o ajustar los vrtices que componen los objetoscreados con dicha herramienta.Herramienta Bote de Tinta: Se emplea para cambiarrpidamente el color de un trazo. Se aplica sobreobjetos, si tienen borde, cambia al color mostrado dedicho borde, por el mostrado en el Panel Mezclador deColores (que coincide con el subpanel Colores que hayen la Barra de Herramientas.) 24. Algunas Herramientas poseen unas opciones especialesque facilitan y potencian su uso. Para acceder a estasutilidades, a veces no basta con hacer clic en laHerramienta correspondiente sino que adems debemoshacer clic en la lnea o en el objeto que has dibujado. Entonces aparecer (o se iluminar si ya estaba presente)un submen como este: Ajustar a Objetos : Se usa para obligar a los objetos a"encajar" unos con otros, es decir, para que en caso deser posible, sus bordes se superpongan, dando lasensacin de estar "unidos". Suavizar: Convierte los trazos rectos en lneas menosrgidas. Enderezar: Realiza la labor inversa. Convierte los trazosredondeados en ms rectilneos. 25. El Panel Color, como su nombre indica se usapara fabricar nuestros propios colores y paraseleccionar los que ms nos gusten. Para seleccionar un colordeterminado, bastar con hacer clic en laspestaas que se encuentran junto a losiconos de las herramientas de Lpiz y de Botede Pintura. (Si queremos modificar el colorde un borde, pulsaremos sobre el color queest junto al lpiz y si queremos modificar unrelleno, haremos clic en el color que estjunto al bote de pintura . Al hacerloaparecer un panel con multitud de colorespara que seleccionemos el que ms nos gusta.Tambin permite introducir el cdigo delcolor segn el estndar. 26. El Panel Muestras sirve para poder ver de un modorpido y claro los colores de que disponemos, tantoslidos (un solo color) como degradados (lineales oradiales). Adems, cuando creemos un color mediante elPanel Color, podremos agregarlo a nuestro conjunto demuestras mediante Agregar Muestra (que se encuentraen un men desplegable en la parte superior derecha delpanel Color). Una vez est agregado el color, pasar aestar disponible en nuestro conjunto de muestras ypodremos acceder a l rpidamente cada vez quetrabajemos con nuestra pelcula. Cada pelcula tiene su propio conjunto de muestras ycada vez que la abramos para editarla, podremos usar lasmuestras que tenamos la ltima vez que trabajamos condicha pelcula. 27. Flash abarca todo aquello que nos pueda hacer falta a la horade crear una animacin, y por tanto, tambin todo aquellorelativo a los textos. Sin embargo, Flash fue concebido paracrear animaciones grficas, de modo que tratar cualquiertexto como si de un objeto ms se tratase, listo para seranimado a nuestro gusto. Esto nos permitir posteriormenteanimar textos y crear espectaculares animaciones con muypoco esfuerzo. Flash distingue entre 3 tipos de texto, textoesttico o normal, texto dinmico y texto de entrada (paraque el usuario introduzca sus datos, por ejemplo), tambin sepuede crear texto que soporte formato HTML etc... Actualmente Flash utiliza dos motores para trabajar contexto: el motor clsico, heredado de las anteriores versiones, yel llamado Text Layout Framework (TLF), el nuevo motorincluido en Flash CS5. Este ltimo, es el utilizado por defectoen Flash. Por defecto, salvo que indiquemos otra cosa, en nuestrosejemplos emplearemos el motor de texto TLF. 28. En la barra de Herramientas encontramosla herramienta Texto , que es la que nospermitir escribir texto en nuestrosproyectos. Los caracteres del texto no estintroducidos directamente en eldocumento, si no que estn confinados enun contenedor de texto. En Flash podemosintroducir dos tipos de contenedores:Texto de puntos. El tamao delcontenedor depende del texto introducido,creciendo y decreciendo con l. Texto derea. Podemos definir su tamao,independientemente del texto quecontenga. 29. El Panel Propiedades contiene las principales propiedades de todos los objetos queempleemos durante nuestra pelcula, de modo que si seleccionamos un texto, podremosver en l todo lo que nos hace falta conocer sobre nuestro texto. Podemos ver que el panelmuestra una gran cantidad de opciones, agrupadas en categoras. Observars que las imgenes anteriores muestran distintas opciones para el texto. Esto sedebe a que la de la izquierda tiene seleccionada el motor Texto TLF, que nos permitemuchas ms opciones. La de la derecha tiene establecido el motor Texto clsico, yaparecen menos opciones, las que venamos encontrando en la anterior versin delprograma. Si quieres saber cmo utilizar el texto clsico, puede seguir este avanzado . Nota: El motor de texto TLF requiere publicar los archivos como ActionScript 3 yFlashPlayer 10 o posterior. Si necesitas publicar archivos para versiones anteriores,debers de emplear el motor clsico. Veamos las principales opciones del panel Propiedades, comunes a ambos motores.Otras ms especficas las veremos ms adelante, cuando vayamos a emplearlas: Podemos elegir cmo se comporta el texto: Si es Seleccionable, y el usuario lo podrseleccionar y copiar en el portapapeles, Slo lectura, lo que impedir que lo puedaseleccionar, o si lo puede cambiar (Editable), por ejemplo, para introducir datos.