Con este tutorial aprenders a usar varias herramientas de Flash relacionadas con el manejo de rellenos para recrear un botn

similar al logo de Cristalab. Adems cuando quieras dibujar botones con apariencia cristalina ya no ser necesario el uso de Photoshop u otro programa de diseo de imgenes.

Paso 1.- Creacin del botn

Abrimos un nuevo documento Flash con las siguientes caractersticas Fondo blanco! "imensiones #$$ p% &anchura' % #$$ p% &altura'. "el panel de herramientas seleccionamos la (erramienta )valo. *n el panel +e,clador de colores &shi-t.F/' elegimos que el estilo de relleno sea 01adial0! en el indicador de color de la i,quierda ponemos el siguiente valor de color 2A$3A"4 y en el de la derecha 2$5436F.

"ibujamos un crculo en medio del documento.&7in borde' Tip.-Para que te salga un crculo perfecto y no un valo presiona Shift constantemente mientras usas el mouse para el dibujo. "el panel de (erramientas seleccionamos la (erramienta de Cubo de pintura y hacemos clic8 en la parte in-erior 49 grados a la derecha.

Con la (erramienta de seleccin selecciona el crculo y convi:rtelo en smbolo &F6' de tipo 3otn con el nombre que desees.

Paso 2.- Texto del botn

(acemos doble clic8 en la circun-erencia he ingresamos al botn. Por el momento trabajaremos en el estado de 1eposo del mismo. Creamos ; capas superiores con los nombres de borde! brillo y letras.

*n el primer -otograma de la capa 0letras0! seleccionamos la herramienta <e%to! *scribimos 0C=0 en el centro del crculo y en la barra de propiedades buscamos un tipo de letra similar al del logo de C=ab! mmmmm! bueno lo mejor sera bajar un Font similar de internet! pero por el momento opt: por =ucida Console ! color blanco! tamao >$ y en negrita.

"e la misma manera escribimos debajo 0C1?7<A0 con te%to Arial ! tamao 6! color blanco y sin negrita@ 0=A30 con te%to Arial 3lac8! tamao 6! color blanco y con negrita para que resalte aAn ms. Achatamos un poco C= con la herramienta de <rans-ormacin libre. Ahora prosigamos a darle sombra a las letras! y as tienen un toque ;". 7i te -ijas slo 0C=0 tiene sombra. 7eleccionamos el te%to 0C=0! lo copiamos y pegamos! con el color de relleno del panel de herramientas le cambiamos el color a 2596"A9! lo situamos en la misma posicin que su te%to original y con C<1= . cursor abajo lo llevamos detrs del 0C=0 original. Tip.- Para pegar un smbolo o texto en la misma posicin que el original basta con presionar "ctrl+shift+v". Tip.- Para llevar un smbolo o texto adelante o detr s de otro en un mismo fotograma basta con seleccionarlo y presionar ctrl+cursor arriba o abajo el n!mero de veces seg!n las posiciones que quiera moverse.

Paso 3.- Brillo del botn

*n el primer -otograma de la capa 0brillo0! seleccionamos la herramienta )valo. *n el panel +e,clador de colores &shi-t.F/' elegimos que el estilo de relleno sea 0=ineal0! en el indicador de color de la i,quierda elegimos blanco y en el de la derecha blanco con Al-a $B. "ibujamos un crculo un poco ms pequeo que el logo como se v: en la imagen a continuacin.

7eleccionamos el relleno con la herramienta de trans-ormacin de relleno &F' modi-icamos el relleno! aparecer un contorno con C smbolos sobre una lnea que demarca el rea del relleno &ver imagen in-erior' con el smbolo de un cuadrado! acortamos el rea del relleno y con el smbolo de un crculo rotamos el relleno para que quede como un re-lejo de una iluminacin en diagonal. Denial noE.. ya toma un gran parecido.

Paso 4.- Borde del botn

3ueno! hay muchas -ormas de reali,ar esto! optar: por la ms rpida. Copia el crculo a,ul de la primera capa! lo pegamos en la misma posicin &acu:rdate del tip ctrl.shi-t.v' pero en la capa 0borde0! cambiamos su color de relleno a 23;3;3; &plomo' y lo copiamos nuevamente para usarlo a -uturo. *stando seleccionado el crculo vamos al +enA +odi-icarFFormaF*%pandir relleno y e%pandimos C$ pi%eles. A continuacin con la (erramienta =nea &=' dibujamos C lneas a 49 grados atrave,ando al crculo como se muestra en la imagen in-erior. *stas lneas acaban de cortar nuestro dibujo... por lo que borramos los C peda,os pequeos del crculo y las C lneas. Tip.-Para crear lneas hori"ontales# verticales o exactamente a $% grados presiona S&'() al dibujar la lnea.

<e acuerdas que tenemos copiada en memoria el crculo! lo pegamos nuevamente manteniendo su posicin! y e%pandimos el relleno en C$ pi%eles & imagen # '! volvemos a pegar el crculo en la misma posicion &recuerda con shi-t' y cambiamos su color a blanco! y le damos una e%pansin de 9 pi%eles & imagen C '! por Altimo hacemos un clic8 -uera del dibujo! de esta -orma el crculo blanco lo cortar! lo seleccionamos para borrarlo y <araaaaannnGGGGG el logo esta listo& imagen ; '.

Paso 5.- Animacin del botn ... lo ms divertido

3ueno! slo hemos trabajado el estado de reposo de nuestro botn! ahora necesitamos crear e-ectos en el estado de sobre y presionado. *sto queda al gusto de cada qui:n! pero divertmonos un rato. 7eleccionamos todos los -otogramas vacos de sobre! presionado y ,ona activa y presionamos F> para llenarlos con sus respectivos -otogramas claves. *n el estado de sobre seleccionamos la capa 0borde0 y convertimos al borde en smbolo &F6' tipo Clip de Pelcula H CP. ?ngresamos al smbolo! y nuevamente lo convertimos en otro smbolo CP para su animacin. Creamos un -otograma clave en el -otograma ;$! seleccionamos un -otograma del medio y en la barra de propiedades elegimos Animar +ovimiento! Aceleracin $! Dirar (orario # ve,. Tip.* Siempre que animes movimiento en flash debes cuidar + cosas, Primero, lo que vas a animar tiene que ser un -lip de Pelcula# Segundo, una animacin siempre toma lugar entre . fotogramas claves# uno indica el principio y el otro el final de la animacin y )ercero, solo debe existir un -P en cada fotograma clave de una animacin. /e esta manera te saldr una flecha con fondo lila con lnea continua y no punteada# cuando sale punteada la lnea es que uno de los anteriores + puntos ha fallado. 0s por esto que se convierte . veces en -P al borde gris del botn# la primera ve" es el -P que contiene la animacin y la segunda es para animarlo dentro de ese -P creado 1porque recuerda que debe ser -P para moverse2. 1etornamos al smbolo de nuestro botn! y en el estado de sobre seleccionamos la capa 0Capa # 0! convertimos en smbolo CP al crculo y en la barra de propiedades seleccionamos Color Avan,ado y presionamos el botn de Con-iguracin. Ios aparece la ventana de *-ectos avan,ados donde podemos jugar con las propiedades 1D3A del smbolo. +antenemos todos los porcentajes en #$$B y en los campos siguientes ingresamos los valores! 1ojo JC99! Kerde 5# y A,ul C$/.. o la combinacin que quieras.. puedes jugar con todo. Iuestro botn esta listo... '

Empecemos: 1- Primero crearemos un nuevo smbolo, haciendo la siguiente combinacin de teclas: ALT+ !" Aparecer# el siguiente cuadro:

$- En %ombre &%ame', escribe (botn 1(, en )omportamiento &*ehavior' selecciona la opcin *otn &*utton', +inalmente ha, clic- en Aceptar &./'" Autom#ticamente, seremos enviado desde la Escena 1 al escenario del smbolo (botn 1(0 ah es donde crearemos un botn 1ue ser# incluido en nuestra biblioteca" El escenario 2nicamente para la creacin de botones, ser# parecido a la siguiente imagen:

3ira hacia la lnea del tiempo &Timeline', como puedes notarlo es di+erente a la lnea del tiempo de la Escena 1" La lnea del tiempo, del escenario para crear botones es parecida a la siguiente imagen:

E4pli1uemos el gr#+ico anterior: 5ebemos entender 1ue 6eposo, 7obre, Presionado 8 9ona activa son los cuatro estados de un botn" :eamos a continuacin, 1u; representa cada estado" 6eposo: es cuando el mouse no est# colocado sobre nuestro botn o no se ha hecho clic- sobre ;l" 7obre: es cuando el mouse est# colocado sobre el botn, pero a2n no se ha hecho clicsobre ;l" Presionado: lgicamente, es cuando haces clic- sobre el botn" 9ona Activa: su mismo nombre lo indica, es cuando el botn est# activo" )ontinuemos con la creacin de nuestro (botn 1(" La cabe,a lectora, en la lnea del tiempo tiene 1ue estar se<alando el estado de 6eposo" =- >a, clic- sobre la >erramienta de 6ect#ngulo &6ectangle Tool', 1ue se encuentra en el Panel de >erramientas" ?- 5ibu@a un rect#ngulo en el centro del #rea de traba@o, 8 ponle el color a,ul" A- 5espu;s presiona la tecla A0 ;sto har# 1ue la cabe,a lectora en la lnea del tiempo pase al estado 7obre" )omo podr#s notarlo, el botn se copia, as 1ue no necesitar#s hacer un nuevo dibu@o" B- A2n estamos en el estado 7obre, si no tienes seleccionado el botn, ha,lo &con la >erramienta lecha 8 ha, doble clic- sobre nuestro dibu@o', luego dirgete a )olor de 6elleno 1ue se encuentra en la seccin colores del Panel de >erramientas, 8 escoge el color ro@o, como se muestra a continuacin:

!- 5espu;s presiona nuevamente la tecla A, para 1ue la cabe,a lectora pase al estado Presionado, 8 cambia el color de relleno de la misma +orma 1ue lo hicimos en el paso B0 8 escoge un color verde" inalmente presiona por ultima ve, A para pasar al estado

9ona activa, ;sto har# 1ue se copie el botn" Para este 2ltimo estado, no es realmente necesario cambiar el color de +ondo" )on los colores 1ue hemos aplicado, haremos 1ue el botn cambie de color, cuando se lleven a cabo los Estados de los botones anteriormente descritos" %uestro botn ha sido creado, as 1ue puedes volver a la Escena 1, abre la biblioteca 8 ver#s 1ue ah esta el smbolo llamado (botn 1(, podr#s arrastrarlo al escenario las veces 1ue 1uieras para hacer varias copias de ;l" Toma la >erramienta de Te4to &A', 8 escribe lo 1ue desees, despu;s coloca el te4to sobre el botn creado0 para probar la pelcula ha, la tradicional combinacin de teclas )T6L + Enter" 7i despu;s 1uieres ver la pelcula en tu e4plorador de internet, 2nicamente presiona las teclas )T6L + 1$"

Flash permite controlar varios eventos, y asignarles diferentes acciones, pero tambin podemos indicar que la reproduccin debe detenerse al llegar a un fotograma determinado, para que el usuario decida dnde seguir mediante un botn. Es decir, podemos acciones a botones o a fotogramas.

EVENTOS de Ratn Presionar: (clic) presionar el botn del ratn mientras el puntero se encuentra sobre el botn. Liberar (predeterminado): liberar el botn del ratn mientras el puntero se encuentra sobre el botn. Esto configura el comportamiento estndar de hacer clic. Liberar fuera: liberar el botn del ratn cuando el puntero no se encuentra sobre el botn. Situar sobre objeto: (mouse over) desplazar el puntero sobre el botn. Situar fuera de objeto: (mouse out) desencadena la accin al desplazar el puntero fuera del botn.

Arrastrar sobre: desencadena la accin al presionar el botn del ratn mientras el puntero se encuentra sobre el botn, se desplaza fuera del botn y, a continuacin, vuelve a desplazarse sobre el botn. Arrastrar fuera: desencadena la accin cuando el botn del ratn se presiona con el puntero sobre el botn y, a continuacin, el puntero se desplaza fuera del botn. de Teclado Presin de tecla: al presionar la tecla especificada. i selecciona esta opcin, debe introducir la tecla en el cuadro de te!to.

ACCIONES Bsicas (hay muchas ms) Go To "#r $%: altar a un fotograma o a una escena Play "&eproducir% y Stop "'etener%: &eproducir y detener pel(culas. Toggle Hig !uality: ")onmutar alta calidad%: a*usta la calidad a alta. "etener todos los sonidos: todos los sonidos se silencian. Get#RL "+btener ,&-%: altar a un ,&- diferente $S%ommand: )ontrolar Flash .layer que est reproduciendo una pel(cula Load&ovie ')argar pel(cula% y #nload&ovie "'escargar pel(cula% Tell Target: "#ndicar destino% )ontrolar otras pel(culas o clips de pel(culas.

(f $rame (s Loaded:)omprobar si se ha cargado un fotograma o no. .ara el t(pico /cargando.../ )n &ouse *vent: $signar un evento de ratn o una tecla de teclado que desencadene la accin.

Aspecto de la paleta de acciones:

-as acciones se pueden asignar mediante el panel Acciones, que se muestra eligiendo el men0: /1entana2$cciones/. 3odas las acciones est+n en ingl,s, incluso en la versin en castellano del programa. Estn organizadas en categor(as. $lgunas acciones requieren el uso de diversos par+metros4 por e*emplo, para la accin 5o3o "ir a% debemos indicar el n0mero de fotograma al que ir, y podemos elegir si adems, queremos reproducir desde dicho sitio.

NOTA: $lgunas acciones no se pueden probar en la ventana de edicin de Flash, pero s( cuando usamos el men0 /)ontrol 2 .robar .el(cula/ "o pulsando )ontrol2#ntro%. -as acciones de fotograma pueden funcionar si est activada la opcin /6abilitar acciones de fotogramas simples/ del men0 /)ontrol/.

Cmo asignar una accin a un botn:

1" 7eleccionar el botn $" Abrir el panel de Acciones &(:entana-Acciones(' C" Pulsar el smbolo + del panel de acciones &o doble clic sobre la accin'" =" Elegir el tipo de evento 1ue causar# la accin &aparecen deba@o'

Cmo asignar una accin a un Fotograma:

1" 7eleccionar el +otograma &debe ser un fotograma clave' $" Abrir el panel de Acciones &(:entana-Acciones(, o doble clic sobre el +otograma' C" Pulsar el smbolo + del panel de acciones &o doble clic sobre la accin'"

Es conveniente colocar todas las acciones en una misma capa, para mayor comodidad, y debe estar .odemos borrar acciones seleccionndolas y haciendo clic en el botn 2 en la tecla / upr/.

Ejemplos de acciones tiles:

-!u, .ueremos/ &epetir una serie de fotogramas "bucle% -%mo se ace/ En el fotograma final, insertamos la accin GoTo "#r $% e indicamos el n0mero del fotograma inicial. "+7+: debemos poner botones en todo el fragmento, para que el usuario pueda salir del bucle.

8ostrar una animacin En el fotograma anterior a la animacin, insertamos la cuando el usuario lo desee. accin Stop "'etener%, y colocamos en el mismo fotograma, un botn al que asignamos la accin Play "reproducir% 'etener la animacin En todo el fragmento donde se pueda detener, cuando el usuario lo desee colocamos un botn al que asignamos la accin Stop "'etener%. 'ebemos mostrar tambin un botn Play "reproducir%, si queremos que se pueda continuar. 8ostrar una pgina 9eb al En el fotograma:s deseado:s, insertamos la accin pulsar un botn. Get#RL ")onseguir ,&-% e indicamos la direccin de la pgina 9eb deseada "local 2datos.htm2 o remota 999.cursos;<<=.com%, y la ventana o marco donde queremos abrirla. 8ostrar una animacin cuando el usuario pase el ratn sobre un botn $signar al botn la accin /)n &ouse *vent,/, e indicar / ituar obre +b*eto/. $ continuacin, insertar la accin /GoTo/ y teclear el n0mero de fotograma donde comienza dicha animacin.

(mportante: i permitimos parar la animacin mediante un botn, debemos a>adir otro botn para continuarla. 6ay que prever todas las situaciones para no de*ar al usuario sin

posibilidad de elegir "e!cepto si deseamos que la animacin se desarrolle sin intervencin del usuario%

Cmo crear una lnea a travs de la cual se mover el objeto:

1" )rear el ob@eto en el +otograma clave inicial $" Agregar una Dua de 3ovimiento &con el botn derecho encima del nombre de la capa' C" )rear interpolacin de movimiento &con el botn derecho apuntando al +otograma inicial' =" Ensertar un +otograma clave al +inal ?" 3over el ob@eto en el +otograma clave +inal &8Fo escalarlo, 8Fo rotarlo' A" En la capa gua, crear un tra,ado &con el pincel, la pluma, el l#pi,, el valo e el rect#ngulo' B" Ensertar un +otograma clave en la capa gua, al +inal !" Arrastrar el ob@eto en cada +otograma clave hasta 1ue a@uste con el comien,o o +in del movimiento tra,ado" G" 7i deseamos 1ue la +orma gire a la ve, 1ue el tra,ado, debemos elegir (.rientar seg2n tra,ado( en la paleta +otograma, en el +otograma inicial" 1H" Podemos ocultar el tra,ado de gua ocultando la capa 1ue lo contiene &botn del o@o'

Cmo cambiar el color de un texto gradualmente:

1eamos cmo hacer el famoso efecto de /fade in/ o /fade out/ "desvanecimiento% de un te!to, que cambiar de color poco a poco, del color de fondo a otro, o de otro al color del fondo "o entre dos colores cualesquiera%
1" )rear el ob@eto en el +otograma clave inicial, con el color inicial $" 7eparar el te4to &(3odi+icar-7eparar(' C" )rear interpolacin de +orma &en la paleta ( otograma(, elegir interpolacin: ( orma(' =" Ensertar un +otograma clave al +inal

?" )ambiar el color del ob@eto en el +otograma +inal

Cmo hacer un giro de

!"# o ms$

i intentamos hacer una interpolacin de movimiento para un ob*eto que deseamos girar ?@<A, o incluso varias vueltas, veremos que no funciona mediante el mtodo normal, puesto que Flash realizar el cambio por el camino ms corto. i lo hemos girado ?B<A, Flash slo girar ;< "?B<2?@<%. i la rotacin es m0ltiplo de ?@<A, el ob*eto vuelve a quedar en la misma posicin en la que estaba, por lo que no se girar nada en absoluto. El mtodo adecuado para rotar una vuelta o m+s es:
1" )rear el ob@eto en el +otograma clave inicial $" )rear interpolacin de movimiento &con el botn derecho apuntando al +otograma inicial' C" En la paleta ( otograma(, elegir 6otar: ()36( para 1ue gire en el sentido de las agu@as del relo@, o ))63, en el contrario" =" En la paleta ( otograma(, elegir el n2mero de vueltas completas ?" Ensertar un +otograma clave al +inal