Instituto Tecnolgico Nuestra Seora del Rosario

Unidad 1. Introduccin a Flash CS3 Flash nos permite crear aplicaciones de gran contenido interactivo para paginas web adems nos permite realizar todo tipo de animaciones juegos etc. Escenario El escenario es el rea rectangular donde se coloca el contenido grfico, que incluye, entre otros: grficos vectoriales, cuadros de texto, botones, clips de vdeo o imgenes de mapa de bits importadas. El escenario del entorno de edicin de Flash representa el espacio rectangular de Adobe Flash Player o del navegador Web donde se muestra el documento de Flash durante la reproduccin. Puede utilizar la funcin de acercar y alejar para ver el escenario cuando trabaja. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botn derecho sobre cualquier parte del escenario en la que no haya ningn objeto y despus sobre Propiedades del documento: en ella detallamos las siguientes opciones: 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. Coincidir: Provocan que el tamao de la pelcula coincida con el botn seleccionado (tamao por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados) Color de Fondo: El color aqu seleccionado ser el color de fondo de toda la pelcula. Velocidad. Fotogramas: O nmero de fotogramas por segundo que aparecern en la pelcula. Unidades de Regla: Unidad que se emplear para medir las cantidades. Transformar en predeterminado: Este botn, propio de la nueva versin de Flash, permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrn ser alteradas desde este panel cuando se desee. Fotograma La lnea de tiempo organiza y controla el contenido de un documento a travs del tiempo en capas y fotogramas. Al igual que en un largometraje, los documentos de Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de pelcula apiladas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los componentes principales de la lnea de tiempo son las capas, los fotogramas y la cabeza lectora. La informacin de estado de la lnea de tiempo situada en la parte inferior de la misma indica el nmero del fotograma seleccionado, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual.

Fotograma clave Un fotograma clave es un fotograma en el que se define un cambio en las propiedades de un objeto de una animacin o se incluye cdigo ActionScript para controlar determinado aspecto del documento. Flash puede interpolar, o rellenar automticamente, los fotogramas ubicados entre fotogramas clave definidos para generar

Modulo 1 de Adobe flash CS3

Instituto Tecnolgico Nuestra Seora del Rosario

animaciones sin cortes. Puesto que los fotogramas clave permiten producir animaciones sin tener que dibujar cada fotograma individual, facilitan la creacin de animaciones. Puede cambiar fcilmente la longitud de una animacin interpolada arrastrando un fotograma clave en la lnea de tiempo. La Barra de Herramientas. Herramientas Bsicas. Las herramientas de la paleta de herramientas le permiten dibujar, pintar, seleccionar y modificar las ilustraciones, as como cambiar la visualizacin del Escenario. Herramienta Seleccin (flecha):. Es la herramienta ms usada de todas. Su uso principal es para seleccionar objetos. Permite seleccionar los bordes de los objetos, los rellenos (con un slo clic), los bordes (con doble clic), zonas a nuestra eleccin... Adems, su uso adecuado puede ahorrarnos tiempo en el trabajo. Herramienta Lnea: Permite crear lneas rectas de un modo rpido. Las lneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la lnea recta. Una vez creada la podemos modificar sin ms que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla. Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se vern en el tema siguiente. Herramienta valo: La herramienta valo permite trazar crculos o elipses de manera rpida y sencilla. Puedes acceder a ella manteniendo el botn del ratn pulsado sobre la herramienta Rectngulo.

Herramienta Rectngulo: tipo de objetos que crean

Su manejo es idntico al de la Herramienta valo, tan solo se diferencian en el

Herramienta Lpiz: Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar lneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicar esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas. Herramienta Pincel: Su funcionalidad equivale a la del lpiz, pero su trazo es mucho ms grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo. Herramienta Cubo de pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no est delimitada por un borde. El color que aplicar esta Herramienta se puede modificar, bien desde el Panel Color o bien desde el sub panel Relleno que hay en la Barra de Herramientas. Herramienta Borrador: Su funcionamiento es anlogo a la Herramienta Pincel. Pero su funcin es la de eliminar todo aquello que "dibuje La Barra de Herramientas. Herramientas Avanzadas. Herramienta Lazo: Su funcin es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha slo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la seleccin a mano). Herramienta Pluma: Crea polgonos (y por tanto rectas, rectngulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vrtices de los polgonos, lo que nos asegura una gran

Modulo 1 de Adobe flash CS3

Instituto Tecnolgico Nuestra Seora del Rosario

precisin. Para crear curvas, hay que sealar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de prctica se acaba dominando.

Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vrtices que componen los objetos creados con dicha herramienta. Herramienta Bote de Tinta: Se emplea para cambiar rpidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coinciden con el subpanel Colores que hay en la Barra de Herramientas.) Herramienta Cuentagotas: Su misin es "Capturar" colores para que posteriormente podamos utilizarlos. Para ver cmo funciona, aconsejamos ver la siguiente animacin:

El Panel Color El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que ms nos gusten. Para seleccionar un color determinado, bastar con hacer clic en las pestaas que se encuentran junto a los iconos de las Herramientas de Lpiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre la pestaa que est junto a la Herramienta Lpiz y si queremos modificar un relleno, haremos clic en la pestaa que est junto a la Herramienta Bote de Pintura.) Al hacerlo aparecer un Panel con multitud de colores para que seleccionemos el que ms nos gusta. Tambin permite introducir el cdigo del color segn el estndar que establece el HTML. Tambin se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la Herramienta Bote de Pintura). Se pueden crear diferentes tipos de Rellenos Slido: Consiste en un relleno formado por un solo color. Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular. Mapa de Bits: Permite colocar como relleno alguna imagen existente en la pelcula (O ajena a ella si antes se "importa") El Panel Muestras 3El Panel Muestras sirve para poder ver de un modo rpido y claro los colores de que disponemos, tanto slidos (un solo color) como degradados (lineales o radiales). Adems, cuando creemos un color mediante el Panel Color, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un men desplegable en la parte superior derecha del Panel Color). Una vez est agregado el color, pasar a estar disponible en nuestro conjunto de muestras y podremos acceder a l rpidamente cada vez que trabajemos con nuestra pelcula. Cada pelcula tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que tenamos la ltima vez que trabajamos con dicha pelcula.

Modulo 1 de Adobe flash CS3

Instituto Tecnolgico Nuestra Seora del Rosario

El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra pelcula, de modo que si seleccionamos un texto, podremos ver en l todo lo que nos hace falta conocer sobre nuestro texto.

Propiedades de los Textos Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir. Veamos a fondo el Panel Propiedades: Fuente: Desde aqu, al igual que en los editores de texto ms comunes podemos seleccionar el tipo de letra o "fuente" que ms nos guste. Espaciado: Determina el espaciado entre los caracteres. til cuando la tipografa que empleamos muestra las letras muy juntas o para dar efectos concretos al texto. Direccin del Texto: Cambia la orientacin del texto de horizontal a vertical, tanto de izquierda a derecha como de derecha a izquierda. Ajuste automtico entre caracteres: caracteres se realice de modo automtico. Posicin: Activar esta casilla provoca que la separacin entre

Nos permite convertir nuestro texto en subndices o en superdices (o dejarlo normal).

Tipo de Lnea: Si el texto que vamos a incluir es dinmico (de lo contrario aparece sin activar), esta opcin nos permite determinar cmo queremos que aparezcan las lneas (lnea nica, multilnea o multilnea sin ajuste). Configuracin: Son las clsicas opciones que permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamao. Otras Propiedades: Dado que Flash trata los textos como objetos, stos tambin tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografas son una parte muy importante y deben respetarse. Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todos ellos. Estos prrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con prrafos (entre otras). A la Izquierda: Todas las lneas empezarn tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido). Centrar: Las lneas se distribuyen a la derecha y a la izquierda del punto medio del Prrafo.

A la derecha: Todas las lneas empezarn tan a la derecha como sea posible (dentro del recuadro de texto que hayamos definido). Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus lmites. El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los sangrados de prrafo y el espacio interlineal. Tipos de Textos Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un tratamiento especial, segn el tipo que sean. Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es

Modulo 1 de Adobe flash CS3

Instituto Tecnolgico Nuestra Seora del Rosario

en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el Panel Propiedades sin ms que haciendo clic sobre la pestaa Tipo de texto: Texto Esttico El Texto Esttico se caracteriza por no presentar ningn cambio a lo largo de la animacin. Es importante que no confundamos la palabra "esttico" con que el texto no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la animacin". Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser esttico. As, un recuadro de texto en el que pone "Aprende Flash CS3" durante toda la pelcula, es esttico, aunque dicho texto cambie de posicin, forma o color. Los textos estticos slo tienen 2 propiedades extras: Usar Fuentes del Dispositivo: Esta opcin permite que la pelcula Flash emplee las Fuentes que tenga instaladas el usuario que ve la pelcula en su ordenador. Si dicho usuario dispone de las fuentes que hemos utilizado en la pelcula, la ver exactamente como queremos que la vea, pero si no las tiene, Flash emplear la fuente que ms se le parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se parezca al que pretendamos, por lo que suele ser conveniente mantener esta opcin sin seleccionar, aunque esto conlleve un mayor tamao de la pelcula final. Seleccionable: Con esta opcin activada el usuario podr seleccionar los textos que aparezcan en la pelcula (cortarlos, copiarlos...) Actvala si lo crees conveniente. Texto Dinmico El Texto Dinmico en contraposicin al esttico s que puede cambiar su contenido (adems de estar animado). Su uso es bastante ms complejo que el del Texto Esttico, ya que cada recuadro de texto Dinmico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programacin, lo que nos saca del objetivo de este curso. Un uso comn que suelen tener es el de representar los textos introducidos mediante Textos de Entrada Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el nmero de lneas que van a tener, se puede introducir texto HTML, se puede aadir fcilmente un borde al texto o dar nombre a la variable que represente al texto Dinmico. Texto de Entrada El Texto de Entrada tiene bsicamente las mismas propiedades que el Texto Dinmico, junto con algunas propias de un tipo de texto orientado a la introduccin de datos por parte de usuario, como por ejemplo el nmero mximo de lneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseas). Evidentemente este tipo de texto se reflejar en nuestra pelcula como un recuadro de texto SIN contenido, ya que lo deber introducir el usuario. Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imgenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra pgina web). An as, crear animaciones con textos, que sobrepasen a las que Flash incorpora por defecto (colores, transparencias, brillos, rotaciones, movimientos o combinaciones de estos) puede resultar un trabajo de muchsimas horas y mucha paciencia. Los resultados son increbles. Interpolacin de Movimientos Las caractersticas principales de Flash es su sencillez, esta sencillez en su utilizacin permite crear animaciones de un modo efectivo y rpido. Pongmonos en situacin, supongamos que queremos crear una animacin en la que una pelota realice un movimiento de "bote", es decir, que baje y suba. Para ello vamos a seguir los siguientes Pasos: Realizando la Animacin Primeramente crear 3 fotogramas clave: en el primero dibujaremos la pelota en el instante inicial (arriba del todo), en el segundo se dibujar la pelota en el momento de tocar el suelo y en el tercero la pelota volver a estar arriba (en realidad 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. Ahora, se determina el tiempo que durar cada movimiento (es decir, el tiempo que transcurre entre los instantes en los que la pelota est arriba y abajo) y por ltimo se le indica a Flash que cree una animacin de movimiento entre estos fotogramas.

Modulo 1 de Adobe flash CS3

Instituto Tecnolgico Nuestra Seora del Rosario

A continuacin hacer clic derecho en el primer fotograma clave elegir opcin interpolacin de movimientos, repetir el mismo paso con el fotograma clave nmero 2. Los Objetos. Crear objetos y aadirlos a nuestra pelcula Flash, en este tema profundizaremos en como trabajar con ellos, para ajustarlos a nuestras necesidades. Independientemente de si estamos trabajando en una animacin, en una pgina web, o en cualquier otra cosa, tendremos que trabajar con objetos. A grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra pelcula y sea visible, de modo que podamos trabajar con l, un objeto sera, por ejemplo, cualquier imagen que creemos o importemos, un botn, un dibujo creado por nosotros mismos etc... Los objetos as considerados tienen 2 partes fundamentales: El Borde: Consiste en una delgada lnea que separa el objeto del exterior del escenario. Puede existir o no, segn nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color ser el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lpiz, Lnea o Pluma y si queremos que nuestro dibujo no tenga borde, bastar con seleccionar el borde y suprimirlo. El Relleno: El relleno no es ms que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia tambin es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vio en el tema de Dibujar, y por tanto, parecer que dicho objeto no tiene relleno, aunque en realidad s que exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como el Pincel o el Cubo de Pintura. Seleccionar Para poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto que queramos modificar (mover, girar, cambiar de color...). Podremos observar que las partes de un objeto seleccionadas toman una apariencia con textura para indicar que estn seleccionadas. Veamos cmo seleccionar las diferentes partes de un objeto: Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde que queramos seleccionar. Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno. Seleccionar todos los bordes (o lneas) de un mismo color que estn en contacto: Hacer doble clic sobre una de las lneas que tenga el color que pretendamos seleccionar. Seleccionar un Smbolo, un texto, o un grupo: Clic en el Smbolo, en el texto o en el grupo. Estos tipos de objetos mostrarn un borde de color azul (por defecto) al estar seleccionados. Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT mientras seleccionamos los objetos que queramos. Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Seleccin (Flecha). Haremos clic en una parte del escenario y arrastraremos el cursor hasta delimitar el rea que contenga los objetos que queremos seleccionar. Si esta rea corta algn objeto, slo quedar seleccionada la parte del objeto que est dentro del rea que hemos delimitado. Si quisiramos incluir dicho objeto, bastara con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar. Determinadas zonas de los objetos, para cortarlas, pegarlas... Adems de la Herramienta Flecha, tambin podemos usar la Herramienta Lazo, ms til an si cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. Al contrario que la Herramienta Flecha, las reas seleccionadas no tienen porque ser rectangulares. Seleccionar a partir de la Lnea de Tiempo: Si seleccionamos un determinado fotograma en la lnea de tiempo, se seleccionan automticamente todos los objetos que estn en dicho fotograma. Esto es til para modificar de un modo rpido todos los elementos del fotograma. Seleccionar Todo: La forma ms natural de seleccionar todo, consiste en hacer clic en el men Edicin Seleccionar Todo.

Modulo 1 de Adobe flash CS3

Instituto Tecnolgico Nuestra Seora del Rosario

Modulo 1 de Adobe flash CS3