Curso de CS5
-
Upload
alexanderson-vallejo -
Category
Documents
-
view
216 -
download
0
Transcript of Curso de CS5
-
8/2/2019 Curso de CS5
1/113
1
Unidad 1. Introduccin a Flash Professional CS5 (II)
1.4. Flash, ventajas y desventajasEl principal uso de Flash se da en el mundo de la web. Desde la creacin de pequeos
botones o banners publicitarios, hasta webs totalmente basadas en esta tecnologa, Internetest repleta de animaciones Flash.
Como todo, Flash presenta tanto ventajas como inconvenientes:
El tiempo de carga . Mientras que una pgina HTML puede ocuparnos 10-20 KB comomedia, una animacin Flash ocupa mucho ms. Evidentemente depende del contenidoque tenga, pero suelen superar los100 KB con facilidad, y si adems incorpora sonidos
es fcil que la cifra se dispare. Al ocupar ms espacio, el tiempo que tardan estar visibleel contenido Flash es mayor y no todos los visitantes estn dispuestos a esperar...simplemente, se irn a otra pgina.Los buscadores . Son capaces de indexar el contenido de nuestra pgina, el texto, perono el contenido del Flash, ya que no lo pueden leer, lo que afectar negativamente alposicionamiento de la pgina. Y hoy en da es crucial para una web encontrarse bienposicionada. No obstante, los buscadores trabajan para solucionar este problema, perode momento al mejor forma de solucionarlo es crear un diseo paralelo sin Flash, lo queaumenta el trabajo.Flash requiere de plugins para poder visualizarse, y el hecho de no tenerlosinstalados, o de que un navegador tenga los scripts deshabilitados por seguridad,impedirn la visualizacin del Flash. Este plugin lo suelen incorporar la mayora denavegadores, es gratuito y se puede instalar desdeaqu de forma muy intuitiva, perosiempre habr usuarios que prefieran salir de nuestra pgina si tienen que instalar "algoraro".Compatibilidad con distintos dispositivos . Cada vez es ms frecuente acceder a laweb con telfonos mviles, SmartPhones y Tablets, y algunos de ellos no soportanFlash (como los Android anteriores a la versin 2.2).Flash es una tecnologa propietaria de Adobe, por lo que su futuro depende de lo queesta compaa quiera hacer con l.Otro aspecto a tener en cuenta es la usabilidad de las pginas Flash, a veces se caeen la tentacin de dar demasiada importancia al diseo y olvidarse de que la pginadebe ser fcil de usar, aunque es ms un error de diseo que del propio Flash.
Tendencia a su desuso en la web. Con la llegada de HTML5, se solventan muchas delas carencias de las pginas tradicionales que nos obligaban a usar Flash. Por lo que suuso deja de tener tanto sentido. De hecho, Flash CS5 incluye una herramienta paraexportar contenidos Flash a HTML5.
Por supuesto su fuerte uso en la web se debe a que tambin aporta ventajas:
La web se vuelve muyvistosa y atractiva , adems de aadirle ms interactividad. Elaspecto visual es muy importante para la web, ya que al visitante, sobre todo alprincipio, "le entra por los ojos".Con un poco de prctica, eldesarrollo con Flash se vuelverpido .
-
8/2/2019 Curso de CS5
2/113
2
Flash permite comportamientos que de otra forma no podramos lograr.Compatibilidad con navegadores . Uno de los principales problemas en el diseo webes que el resultado no tiene por qu verse igual en todos los navegadores. Con Flash,nos aseguramos de que lo que hemos creado es exactamente lo que se ver.Por tanto, se hace necesario cuando lo que se necesita es que el usuario puedainteractuar completamente con el contenido.
Resumiendo, insertar o no contenido Flash en una pgina web puede ser cuestionable,aunque depende de muchas cosas. An as, no hemos de olvidar que Flash tiene muchsimasaplicaciones ms (hecho que ha provocado que otras compaas traten de sacar a la venta"clnicos" del Flash). Por ejemplo, se puede usar Flash para la creacin de DVDs interactivos(como los que incluyen las revistas de informtica, entre otras), la creacin de bannerspublicitarios o lo que ms est de moda ahora: la creacin de dibujos animados (ossorprendera saber la cantidad de dibujos animados conocidos creados o animados medianteFlash). Adems, Flash tiene uso industrial, pues se emplea para optimizar planos, creardiseos de interiores y trabajar con imgenes vectoriales en general. No dejis de aprender amanejar el programa con ms futuro... (al menos en cuanto a diseo web)
Aqu tenis algunas pginas interesantes hechas con FLASHNRG y fwa, o con entradas
muy llamativashttp://www.derbauer.de/ ,
Nuestro consejo es emplear Flash nicamente en lo imprescindible en nuestra web dejandoel contenido principal de la web y los elementos de navegacin como HTML, que la webpueda funcionar si un usuario no puede ver los elementos en Flash y no se pierda nadarealmente importante, a no ser que se trate de una web en la que su valor sea justamente sucontenido interactivo o visual en Flash.
Unidad 1. Introduccin a Flash Professional CS5 (III)
1.5. Mi primera animacin Flash
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 un trabajo
-
8/2/2019 Curso de CS5
3/113
de horas, pero
Veamos cmo Flash nos lEn este apartado no pr
ver ms adelante), el objmodo nos facilita el trabajo
A primera vista, lo lgicmodo que cuantos ms insFlash bastar con crear 3 f(arriba del todo), en el segtercero la pelota volver apues bastar con copiar eobjetos) ya est hecho.
Ahora, se determina etranscurre entre los instanta Flash que cree una anim
En esta versin de Flmovimiento como veremos
Observa cmo ha qued
Podis poner a prueba v
nada ms lejos de
pone fcil.tendemos ensear cmo crear una animacintivo es que entendamos cmo crea Flash las ani.
o parece ser dibujar la pelota en cada instantetantes dibujemos, ms real parecer el movimieotogramas: en el primero dibujaremos la pelotaundo se dibujar la pelota en el momento de toestar arriba (en realidad este tercer fotograma nl primero). Por tanto, vemos que el trabajo m
l tiempo que durar cada movimiento (es dees en los que la pelota est arriba y abajo) y poacin de movimiento entre estos fotogramas. F
sh an se ha facilitado ms la realizacin den el tema correspondiente.
do:
uestros conocimientos realizando la:
3
la realidad.
lash (pues eso semaciones y de que
el movimiento, dento. Pues bien, conn el instante inicialar el suelo y en elhar falta crearlo,
s largo (dibujar los
cir, el tiempo queltimo se le indicail verdad?
e animaciones de
-
8/2/2019 Curso de CS5
4/113
4
Unidad 2. El entorno de Flash CS5 (I)
2.1. La interfaz de Flash Pro CS5Flash CS5 cuenta con un entorno o interfaz de trabajo de lo ms manejable e intuitiva.
Adems, tiene la ventaja de que es casi idntica a la de otros programas de Adobe(Photoshop, Dreamweaver, Illustrator...), todo esto hace ms fcil aprender Flash y msrpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS5 por primeravez:
A lo largo de todo el curso trabajaremos con la versin de evaluacin de Flash CS5 encastellano. Podeis descargar esta versin de forma gratuita desde laweb de Adobe. Estardisponible hasta que se lance la siguiente evrsin.
En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramosel programa Flash. Flash recordar nuestras preferencias y abrir el programa tal y como lodejamos la ltima vez que lo utilizamos.
-
8/2/2019 Curso de CS5
5/113
5
En esta imagen faltan algunos mens. Todos se irn viendo a lo largo de este cursoaunque no aparezcan en esta imagen, que slo pretende mostrar las partes principales de la
interfaz de Flash. Veamos cules son.
Unidad 2. El entorno de Flash CS5 (II)
2.2. La barra de Mens
La Barra de Mens tiene como propsito facilitar el acceso a las distintas utilidades delprograma. Es similar a la de cualquier otro programa de diseo web o grfico, aunque tienealgunas particularidades. Veamos los principalesSubmens a los que se puede acceder:
Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de lautilidadImportar que inserta en la pelcula actual casi todo tipo de archivos (sonidos, vdeo,imgenes e incluso otras pelculas Flash), o la deConfiguracin 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 permiteCortar, Copiar, Pegar... tanto objetos o dibujoscomo fotogramas; tambin permite personalizar algunas de las opciones ms comunes delprograma.
Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por lasescenas. Tambin incluye la posibilidad de crear una cuadrcula y unas guas. Esto se puedeseleccionar desde los submens Cuadrcula y Guas desde donde tambin se pueden
configurar sus opciones.
Insertar : Permite insertar objetos en la pelcula, as como nuevos fotogramas, capas,acciones, escenas...
Modificar: La opcinTransformar permite modificar los grficos existentes en la pelcula, yla opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales (este tema setratar ms adelante). El resto de opciones permite modificar caractersticas de los elementosde la animacinSuavizar, Optimizar o de la propia pelcula(Capa, Escena ...) .
-
8/2/2019 Curso de CS5
6/113
6
Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se tratar enprofundidad.
Comandos : Permite administrar los Comandos (conjunto de sentencias almacenadas quepermiten emular lo que un usuario pueda introducir en el entorno de edicin) que hayamosalmacenado en nuestra animacin, obtener otros nuevos de la pgina de Macromedia oejecutar los que ya tengamos.
Control: Desde aqu se modifican las propiedades de reproduccin de la pelcula. Reproducir, Rebobinar, Probar Pelcula ....
Depurar: Aqu encontraremos las opciones de depuracin de la pelcula que te ayudarana encontrar errores de progrmacin en ActionScrit, entre ellos se encuentranEntrar, Pasar ,Salir, Continuar ...
Ventana : Este men, adems de las opciones clsicas acerca de cmo distribuir lasventanas, incluye accesos directos atodos los paneles y tambin la posibilidad de crear tuspropiosEspacios de Trabajo , guardarlos, cargarlos, etc.
Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Adobe, desde elmanual existente, hasta el diccionario de Action Script, pasando por tutoriales, leccionesguiadas etc...
Veamos un ejemplo prctico del uso de mens, realiza elEjercicio utilizar la cuadrcula
Unidad 2. El entorno de Flash CS5 (III)
2.3. La Lnea de tiempo
La Lnea de Tiempo representa una forma de ver los fotogramas de modo simplificado.Consta de 2 partes.
1) Los Fotogramas (frames) que vienen delimitados por lneas verticales (formandorectngulos)
-
8/2/2019 Curso de CS5
7/113
7
2) Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado cadafotograma, cunto dura o cundo aparecer en la pelcula.
Adems, en la parte inferior hay herramientas para trabajar conPapel cebolla einformacin sobre elNmero de Fotograma actual (1 en la imagen), laVelocidad de losFotogramas (24.0 en la imagen) y elTiempo de pelcula transcurrido (0.0s en la imagen).
A nivel conceptual, laLnea de Tiempo representa la sucesin de Fotogramas en eltiempo. Es decir, la pelcula Flash no ser nada ms que los fotogramas que aparecen en laLnea de tiempo uno detrs de otro, en el orden que establece la mismaLnea de tiempo.
Para saber ms acerca de la Lnea de Tiempo y de los distintos tipos de fotogramas queexisten visita nuestra Pgina Avanzada .
2.4. Las capas
El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada laimportancia de estas, se le dedicar un tema completo. An as, veamos a grandes rasgosqu son las capas.
Una Capa se puede definir como una pelcula independiente de un nico nivel. Es decir,
una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas).
Los objetos que estn en una determinadacapa comparten fotograma y por tanto, pueden"mezclarse" entre s. Esto es interesante a menudo, pero otras veces es conveniente separarlos objetos de modo que no interfieran entre s. Para ello, crearemos tantas capas como seanecesario. El uso de mltiples capas adems, da lugar a pelculas bien ordenadas y de fcilmanejo (es conveniente colocar los el cdigo ActionScript en una capa independiente llamada"acciones", por ejemplo). Las ventajas y desventajas de usar capas se ver en la unidadreferente a Capas .
2.5. El Escenario
-
8/2/2019 Curso de CS5
8/113
8
A continuacin veremos las diferentes partes que conforman el rea de trabajoempezaremos con la ms importante: elEscenario .
Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelcula queestemos realizando. El escenario tiene unas propiedades muy importantes, ya que coincidencon las Propiedades del documento . Para acceder a ellas, hagamos clic con el botnderecho sobre cualquier parte del escenario en la que no haya ningn objeto y despus sobrePropiedades del documento :
Aade metadatos a tus archivos para una mejor inclusin de estos en los motores debusqueda rellenando los campos deTtulo 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)
Color de Fondo : El color aqu seleccionado ser el color de fondo de toda la pelcula.
Veloc. Fotogramas : O nmero de fotogramas por segundo que aparecern en la pelcula.Para cambiar este nmero, arrastra con el cursor hacia la derecha o izquierda.
-
8/2/2019 Curso de CS5
9/113
Transformar en pred
documento actual y aplic
instante en adelante. Estacuando se desee.
Para practicar estasCambiar las dimensiones
Unidad 2. El entorn
2.6. Las Vistas o Zoo
La Herramienta Zoopermitiendo abarcar ms oen con el Zoom duplicarem
Panel Zooms: Son uVer. Son muy tiles y ayud
Para saber ms acerca
2.7. Los Paneles
Los Paneles son conjunque haga referencia a lasfacilitar el uso de los coma
Estos paneles o ventatrabajo. Pudindose expan
terminado : Este botn permite almacenar laarlas a todos los documentos nuevos que se
propiedades por supuesto podrn ser alterada
operaciones te aconsejamos realizar el ejere la pelcula
de Flash CS5 (IV)
s
m se emplea para acercar o alejar la vimenos zona delEntorno de Trabajo . Cada veos el porcentaje indicado en el desplegableZoo
conjunto de accesos directos a Submens exian a acelerar el trabajo cuando se emplean corr
e los Zooms pgina Bsica .
tos de comandos agrupados segn su funcin (acciones, ir en el Panel Acciones ). Su misi
ndos.
as se encuentran organizados en el lateral dedir o minimizar con un clic de ratn.
9
s propiedades delcreen desde ese
s desde este panel
icio paso a paso
sta de un objeto,que hagamos clic
ms .
tentes en el Menctamente.
or ejemplo, todo lon es simplificar y
recho del rea de
-
8/2/2019 Curso de CS5
10/113
10
Si no estn visibles en el lateral derecho, puedes visualizarlos desplegando el menVentana 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 un poco caticopuedas recuperar tu configuracin elegida desde el menVentana .
Para ello debers acceder a la opcinVentana Espacio de trabajo Nuevo espaciode trabajo y asignar un nombre a nuestro nuevo espacio.
Ahora slo bastar darle un nombre a la disposicin y ser accesible desde el mismoelemento de menEspacio de trabajo en cualquier momento.
Todos los paneles se estudiarn en profundidad a lo largo del curso. An as, vamos anombrarlos 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. (Incluidasnuestras creaciones).Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados,permitindonos modificarlas. Muy til para alineaciones exactas.Panel Escena : Modifica los atributos de las escenas que usemos.
Si an no sabes lo que son lasEscenas , te lo explicamos en nuestro tema bsico .
Panel Transformar : Ensancha, encoge, gira ... los objetos seleccionados.
-
8/2/2019 Curso de CS5
11/113
11
Panel Acciones : De gran ayuda para emplear Action Script y asociar acciones a nuestrapelcula.
Panel Comportamientos : Permiten asignar a determinados objetos una serie decaractersticas (comportamientos) que despus podrn almacenarse para aplicarse aotros objetos de forma rpida y eficaz.
Panel Componentes : Nos permite acceder a los Componentes ya construidos y listospara 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 las
propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo detrazo, tamao de los caracteres, tipografa, propiedades de los objetos (si hayinterpolaciones etc...), coordenadas, tamao etc... Es fundamental, no debeis perderlode vista nunca.Panel Explorador de Pelculas : Nos permite acceder a todo el contenido de nuestrapelcula de forma fcil y rpida
Para practicar estas operaciones te aconsejamos realizarEjercicio Acceder a los Paneles
Ejercicios del Tema 2. Prueba evaluativa del Tema 2.
Unidad 3. Dibujar y colorear (I)
3.1. El dibujo en Flash CS5
Cuando se disea una pgina web o una animacin el diseador pasa por muchas fases.Tras la fase de "Qu quiero crear y cmo va a ser" viene (normalmente) la fase de diseogrfico. Llevar lo que ha producido tu imaginacin al papel (en este caso al papel de Flash).
No conviene engaarnos, Flash no es un programa de diseo grfico, pero su potencia eneste mbito es casi tan grande como la de stos programas. Vamos a ver cmo emplear cadaherramienta de dibujo para sacarle el mximo partido.
3.2. La barra de Herramientas. Herramientas bsicas
La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo.Algunas herramientas llevan asociados modificadores de herramientas, que permiten cambiar
-
8/2/2019 Curso de CS5
12/113
12
algunas propiedades de la herramienta, y que aparecen al final del panel deherramientas .Veamos las herramientas ms importantes:
HerramientaSeleccin (flecha): . Es la herramienta ms usada de todas. Su usoprincipal es para seleccionar objetos, permite seleccionar los bordes de los objetos (condoble clic), los rellenos (con un slo clic), zonas a nuestra eleccin... Su uso adecuadopuede 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.
-
8/2/2019 Curso de CS5
13/113
13
HerramientaLnea: Permite crear lneas rectas de un modo rpido. Las lneas secrean como en cualquier programa de dibujo, se hace clic y se arrastra hasta dondequeramos que llegue la lnea recta. Una vez creada la podemos modificar situando elcursor encima de los extremos para estirarlos y en cualquier otra parte cercana a larecta para curvarla.
Herramienta de forma: Permite dibujarformas predefinidas como las que aparecen en la imagen, la ltima herramienta utilizadaes la que aparece como icono en la barra de herramientas. Manteniendo pulsado elicono podremos acceder a las diferentes herramientas de forma. Por ejemplo:La herramientavalo permite dibujar crculos o elipses de manera rpida y sencilla.
Para practicar el manejo de esta Herramienta, te aconsejamos realizarEjercicio Crearvalo.
HerramientaLpiz: 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 el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra deHerramientas .
HerramientaPincel: 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 suherramientas .
HerramientaCubo 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 PanelColor o bien desde el subpanelRelleno que hayen la Barra de Herramientas .
HerramientaBorrador : Su funcionamiento es anlogo a la HerramientaPincel. Perosu funcin es la de eliminar todo aquello que "dibuje".
Unidad 3. Dibujar y colorear (II)
3.3. La barra de Herramientas. Herramientas avanzadas
HerramientaLazo:
Su funcin es complementaria a la de la herramientaSeleccin , pues puede seleccionarcualquier cosa, sin importar la forma, (la Herramienta Flecha slo puede seleccionar objetos o
-
8/2/2019 Curso de CS5
14/113
zonas rectangulares o cseleccionar rellenos u obje
Al seleccionar esta her
. Esto es la herrPermite hacer seleccioneseste: para seleccionar
HerramientaPluma:sencillo. Mucha gente enpotentes que ofrece Flashdefinir como vrtices de lcurvas, hay que sealar lellas. Con un poco de prc
Herramienta SubselPluma, ya que permite mdicha herramienta.
HerramientaBote detrazo. Se aplica sobre objel mostrado en el Panelhay en laBarra de Herra
HerramientaCuentag
podamos utilizarlos. Para v
3.4. La barra de Herra
Algunas HerramientaPara acceder a estas ucorrespondiente sino quedibujado.
Entonces aparecer (o s
uadradas). En contrapartida, la Herramientaos (a menos que hagamos la seleccin a mano)
amienta, en el Panel de Herramientas apare
mienta Varita Mgica, tan popular en otros prsegn los colores de los objetos. El tercer dib
Poligono .
Crea polgonos (y por tanto rectas, rectnguentra esta herramienta complicada, aunque. Su empleo consiste en hacer clic en los lugas polgonos, lo que nos asegura una gran prs puntos que la delimitan y posteriormente tratica se acaba dominando.
ccin : Esta Herramienta complementaver o ajustar los vrtices que componen los o
Tinta: Se emplea para cambiar rpidametos, si tienen borde, cambia al color mostradoezclador de Colores (que coincide con el subientas .)
otas : Su misin es "capturar" colores para
er cmo funciona, consulta este videotutorial:
ientas. Opciones
poseen unas opciones especiales que facilitanilidades, a veces no basta con hacer clicadems debemos hacer clic en la lnea o en
e iluminar si ya estaba presente) un submen c
14
Lazo no puede.
en estos botones:
gramas de dibujo. jo que aparece es
los...) de un modos una de las msres que queramoscisin. Para crearar las tangentes a
a la Herramienta jetos creados con
nte el color de une dicho borde, por
panel Colores que
ue posteriormente
potencian su uso.n la Herramientael objeto que has
omo este:
-
8/2/2019 Curso de CS5
15/113
Ajustar a Objetos :es decir, para que en casoestar "unidos".
Suavizar: Con
Enderezar : Rerectilneos.
Unidad 3. Dibujar y
3.5. El panel Color
El Panel Color, comopara seleccionar los que m
Para seleccionar un coencuentran junto a los icqueremos modificar el col
y si queremos m
pintura . Al hacseleccionemos el que msestndar.
Se usa para obligar a los objetos a "encajde ser posible, sus bordes se superpongan, dan
ierte los trazos rectos en lneas menos rgidas.
aliza la labor inversa. Convierte los trazos red
colorear (III)
u nombre indica se usa para fabricar nuestros nos gusten.
lor determinado, bastar con hacer clic en laonos de las herramientas de Lpiz y de Boor de un borde, pulsaremos sobre el color que
dificar un relleno, haremos clic en el color que e
rlo aparecer un panel con multitud denos gusta. Tambin permite introducir el cdig
15
ar" unos con otros,do la sensacin de
ondeados en ms
propios colores y
pestaas que see de Pintura . (Siest junto al lpiz
st junto al bote de
olores para quedel color segn el
-
8/2/2019 Curso de CS5
16/113
En vez de este selectorpaneles.
As mismo se puede d(mediante la herramienta
Se pueden crear diferen
Slido: Consiste en
Degradado Lineal: hasta convertirse enDegradado Radial:
Relleno de mapa depelcula (O ajena a el
Para aprender a creara paso Crear transparenci
3.6. El panel Muestras
rpido, podemos usar el panelColor, que enco
terminar el tipo de relleno que aplicaremos a lote de Pintura ).
tes tipos de relleno:
n relleno formado por un solo color.
s un tipo especial de relleno, de modo que utro. Puede ir de arriba abajo o de un lado al otros igual que el anterior, pero los degradados tien
Bits: Permite colocar como relleno alguna imala si antes se "importa")
un color transparente (semi-transparente), realis.
16
traremos entre los
s objetos creados
color se degrada
e forma circular.
en existente en la
a el ejercicio paso
-
8/2/2019 Curso de CS5
17/113
17
El Panel Muestras sirve para poder ver de un modo rpido y claro los colores de quedisponemos, tanto slidos (un solo color) como degradados (lineales o radiales). Adems,
cuando creemos un color mediante el PanelColor, podremos agregarlo a nuestro conjunto demuestras mediante Agregar Muestra (que se encuentra en un men desplegable en la partesuperior derecha del panelColor). Una vez est agregado el color, pasar a estar disponibleen nuestro conjunto de muestras y podremos acceder a l rpidamente cada vez quetrabajemos con nuestra pelcula.
Cada pelcula tiene su propio conjunto de muestras y cada vez que la abramos paraeditarla, podremos usar las muestras que tenamos la ltima vez que trabajamos con dichapelcula.
Para practicar el manejo de este panel, te aconsejamos realizar el ejercicio paso a pasoColorear un valo
Ejercicios del Tema 3. Prueba evaluativa del Tema 3.
Unidad 4. Textos (I)4.1. El texto en Flash
Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animacin, ypor tanto, tambin todo aquello relativo a los textos. Sin embargo, Flash fue concebido paracrear animaciones grficas, de modo que tratar cualquier texto como si de un objeto ms setratase, listo para ser animado a nuestro gusto. Esto nos permitir posteriormente animartextos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3tipos de texto, texto esttico o normal, texto dinmico y texto de entrada (para que el usuariointroduzca sus datos, por ejemplo), tambin se puede crear texto que soporte formato HTMLetc...
Actualmente Flash utiliza dos motores para trabajar con texto: el motorclsico , heredadode las anteriores versiones, y el llamado Text Layout Framework (TLF), el nuevo motorincluido en Flash CS5. Este ltimo, es el utilizado por defecto en Flash.
-
8/2/2019 Curso de CS5
18/113
Por defecto, salvo que ide textoTLF.
4.2. Insertar texto
En la barra de Herram
permitir escribir texto en
Los caracteres del textestn confinados en uncontenedores:
Texto de pu
El tamao del contenTexto de re
Podemos definir su t
Para insertar un Textcomenzar a escribir. En caclic y arrastrar para definir
ndiquemos otra cosa, en nuestros ejemplos em
ientas encontramos la herramientaTexto ,
uestros proyectos.
o no est introducidos directamente en el docontenedor de texto. En Flash podemos intro
tos.
edor depende del texto introducido, creciendo y.mao, independientemente del texto que conten
de puntos , basta con hacer clic con la hembio, si queremos introducir unTexto de rea ,el tamao del rea. En cualquier caso, siempre
18
learemos el motor
que es la que nos
umento, si no queucir dos tipos de
ecreciendo con l.
ga.
rramienta Texto yenemos que hacerpodemos convertir
-
8/2/2019 Curso de CS5
19/113
19
un Texto de puntos en rea simplemente cambiando su tamao, estirando de los controles detransformacin que se muestran alrededor.
Para saber ms acerca de Cmo escribir textos visita nuestra pgina avanzada .
Unidad 4. Textos (II)
4.3. Propiedades de los textos
El Panel Propiedades contiene las principales propiedades de todos los objetos que
empleemos durante nuestra pelcula, de modo que si seleccionamos un texto, podremos veren l todo lo que nos hace falta conocer sobre nuestro texto. Podemos ver que el panelmuestra una gran cantidad de opciones, agrupadas en categoras.
-
8/2/2019 Curso de CS5
20/113
20
Observars que las imgenes anteriores muestran distintas opciones para el texto. Esto sedebe a que la de la izquierda tiene seleccionada el motorTexto TLF, que nos permite muchas
ms opciones. La de la derecha tiene establecido el motorTexto clsico , y aparecen menosopciones, las que venamos encontrando en la anterior versin del programa.
Si quieres saber cmo utilizar eltexto 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, debersde emplear el motor clsico.
Veamos las principales opciones del panelPropiedades , comunes a ambos motores. Otrasms especficas las veremos ms adelante, cuando vayamos a emplearlas:
Podemos elegir cmo se comporta el texto: Si esSeleccionable , 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.
Adems, podemos establecer la orientacin del texto, enHorizontal (por defecto) oVertical.
Posicin y Tamao : Dado que Flash trata los textos como objetos, stos tambin tienenanchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos teneren cuenta que los caracteres no deben estirarse sin motivo, pues las tipografas son una partemuy importante y deben respetarse.
En el panel encontramos las coordenadas horizontal (X) y vertical (Y) del la esquinasuperior del elemento de texto, coincidiendo las coordenadas 0 0 con la esquina superiorizquierda de la escena. Tambin se muestran los valores del ancho (AN) y alto (AL) del texto.
-
8/2/2019 Curso de CS5
21/113
21
Carcter . En esta seccin encontramos las opciones tpicas del texto:
Familia: Desde aqu, al igual que enlos editores de texto ms comunes podemos seleccionar el tipo de letra o "fuente" que mejorse ajuste a nuestro diseo.
Estilo: Nos permiten la combinacin de los dos estilos de texto habituales: texto normal(Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic).
Tamao : El tamao de la tipografa empelada.
Interlineado: Nos permite controlar la separacin entre las lneas de texto dentro de unmismo prrafo.
Color: Como al resto de elementos, podemos dar color al texto.
Espaciado: Determina el espaciado adicional entre caracteres. til cuando la tipografaque empleamos muestra las letras muy juntas o para dar efectos concretos al texto.
Ajuste automtico : Activar esta casilla provoca que la separacin entre caracteres se
realice de modo automtico.
Suavizado : Las opciones de suavizado resultan importantes a la hora de mostrar nuestrotexto. Encontramos estas opciones:
o Utilizar fuentes de dispositivo : Se emplean las fuentes instaladas en elequipo, lo que hace ms liviano el archivo SWF al no tener que incluirlas.Aunque nos exponemos a que la fuente no est instalada, por lo que se
-
8/2/2019 Curso de CS5
22/113
22
emplear otra. Slo deberamos de utilizar esta opcin para las familias defuentes ms comunes.
o Suavizado para legibilidad , favorece la legibilidad del texto. En este caso,deberamos de incorporar la fuente, como veremos ms adelante. No debemosde emplearla en textos animados.
o Suavizado para animacin , es la mejor opcin cuando pretendemos animartexto, ya que se obtienen animaciones ms fluidas ignorando algunos aspectosdel texto, como alineaciones. En este caso, deberamos de incorporar la fuente.
Giro y otros estilos : Al final de este grupo de opciones encontramos las opciones pararotar el texto seleccionado, y aplicarle estilos de subrayado, tachado, superndice y subndice.
Carcter avanzado :
Vnculo: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una direccinweb, nada ms fcil que escribirla ah. Flash la asociar al texto que ests escribiendo en esemomento.
Destino: Determina si la URL a la que el texto hace referencia se cargar en la mismaventana del navegador, en una nueva ...
Adems, en esta seccin podemos especificar cmo se comporta el texto Por ejemplo, quese muestre en maysculas, los saltos, etc...
-
8/2/2019 Curso de CS5
23/113
23
Unidad 4. Textos (III)
Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todosellos. 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 (dentrodel 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. Las diferentes opciones se refieren a la ltima lnea deltexto, que suele ser ms corta que el resto.
El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los
sangrados de prrafo y el espacio interlineal.
Para practicar estas propiedades te aconsejamos realizarEjercicio Propiedades deltexto.
4.4. Propiedades de los contenedores de texto
En el panel de propiedades, podemos encontrar algunas opciones que afectan a loscontenedores de texto, en la categora de opcionesContenedor y flujo.
-
8/2/2019 Curso de CS5
24/113
24
La propiedadComportamiento se refiere a como se ampla un contenedor de Texto alintroducir texto.
Caracteres mx. : Nos permite limitar el nmero mximo de caracteres que se puedenintroducir en la caja de texto.
Alineacin: nos permite establecer la alineacin horizontal del texto en el contenedor. Susvalores pueden ser Superior , Centrar, Inferior o Justificar .
Columnas nos permite dividir fcilmente un texto de rea en el nmero de columnasindicado. En este caso, tambin podremos regular el espacio entre ellas (medianil).
.
El relleno (padding) permite crear una separacin entre los bordes del contenedor y eltexto.
Adems, podemos asignar uncolor de relleno y borde al contenedor.
-
8/2/2019 Curso de CS5
25/113
25
Unidad 4. Textos (IV)
4.5. Flujo de texto entre contenedoresAl escribir, podemos crear textos de reas con un texto fijo, y colocarlo en un lugar del
documento. Pero pensemos en un trptico, por ejemplo. En este caso lo ideal sera tener untexto de rea centrado en cada pgina, y que cuando el texto no nos cabe en uno, pase alsiguiente. Esto lo conseguimos enlazando los distintos textos de rea.
Los textos de rea tienen un cuadradito en su comienzo, llamadopuerto de entrada , yotro al final, llamadopuerto de salida .
Cuando todo el texto cabe en el elemento de texto, el puerto de salida aparece en blanco.Pero cuando el texto desborda al elemento, el puerto de salida muestra el smbolo . Cuandodos elementos de texto aparecen enlazados, el que va primero muestra una flecha haciaafuera en el puerto de salida, que est unido al puerto de entrada del siguiente elemento, que
muestra una flecha hacia adentro.
Para crear un elemento de texto enlazado, partimos de un objeto de texto ya creado, yhacemos clic con la herramientaSeleccin en uno de sus puertos, en el de entrada siqueremos que el nuevo objeto vaya delante, o en el de salida si el nuevo objeto ir acontinuacin. El cursor cambiar a cursor de , dndonos dos opciones:
Hacer clic en el en otro rea de texto para enlazarlo.
-
8/2/2019 Curso de CS5
26/113
26
Trazar un nuevo elemento de texto, igual que con la herramienta Texto. Si esto lohacemos en un puerto ya enlazado, el nuevo elemento de texto se colocar entre loselementos que estaban enlazados.
Para romper un enlace, podemos hacer doble clic sobre un puerto enlazado, lo que muevetodo el texto al puerto de origen.
Para practicar lo que hemos visto, te aconsejamos realizar el ejercicio paso a pasoCrearun flujo de texto.
4.6. Incorporar fuentes
Al crear un archivo de flash con texto, si enSuavizado no hemos elegido fuentes dedispositivo, tenemos que tener presente que si hemos elegido una fuente que no estdisponible en el sistema que se reproduce la pelcula, se sustituir por otra fuente disponible.Esto es un problema, ya que puede alterar bastante nuestro diseo.
Para evitar esto, podemos incluir las fuentes que hemos empleado en nuestro proyecto.Esto garantiza que el texto se vea tal y como lo creamos, independientemente de las fuentesdel sistema.
Para incorporar una fuente en la pelcula usamos el botnIncorporar que aparece en elpanel de Propiedades .
Se abrir el siguiente cuadro de dilogo:
-
8/2/2019 Curso de CS5
27/113
27
En el desplegableFamilia seleccionamos la fuente que deseamos utilizar. Seleccionamoslos estilos que vamos a utilizar (Negrita, Cursiva y Tamao ).
El nombre que le demos se mostrar en laBiblioteca y estar lista para utilizarse.
Cuando creemos un campo de texto, seleccionamos nuestra fuente, que aparecersealada con un asterisco (*).
De esta forma nos aseguramos que nuestro proyecto se ver tal cual lo creamos.
Unidad 4. Textos (V)
4.7. Introducir texto
Aunque el uso ms comn y principal de los contenedores de texto es mostrarlo, tambinpodemos emplearlos como un cuadro de entada de texto.
Para hacerlo, basta con seleccionarTexto editable en las propiedades del elemento.
En el siguiente ejemplo, tenemos tres cuadros de texto: el de arriba es editable, el delmedio solo seleccionable y el de abajo solo se puede leer. Y tambin hemos hecho que elcontenido de todos cambie segn lo que se escriba en el primero.
-
8/2/2019 Curso de CS5
28/113
28
Para recoger informacin de los usuarios, normalmente emplearemoscomponentes deformulario, que son controles especficos para esta funcin. Pero a esto le dedicaremos un
tema completo ms adelante.
Pero cmo recogemos la informacin introducida en el cuadro de texto? Aunque an no lohemos explicado, el texto es un objeto. Y como tal, tiene una propiedad que nos permite leersu contenido mediante ActionScript. Cuando comencemos a trabajar con ActionScriptveremos que esto, es una tarea muy sencilla.
Ejercicios del Tema 4. Prueba evaluativa del Tema 4.
Unidad 5. Sonidos en Flash (I)
5.1. El sonido en Flash
Quin sera capaz de ver una pelcula muda? Y una animacin espectacular sin sonido?
Hasta hace poco, los nicos sonidos que oamos en las pginas web eran los famosos
"midis", de escaso tamao y de escasa calidad. De hecho, eran slo instrumentos musicalessin voz, de ah su pequeo tamao (y calidad). An as, siempre exista algn creador depginas web que se aventuraba a poner algn sonido complejo (.wav o .mp3) en su pginaweb, por desgracia, su carga es tan lenta, que la mayora de los visitantes se iran de lapgina sin llegar a escucharla.
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, ponersonido a las pginas web es un poco ms fcil, qu aporta Flash?
-
8/2/2019 Curso de CS5
29/113
Flash nos permite insert.mp3, etc...) de forma fcil
siempre y cuando se desc
Podemos dar a la pelcomplejos (msica de foconjuntamente con una mdescargada previamente,definitiva, Flash nos lo vuel
Pero hemos de tener c
que sea el usuario quien laautomticamente, tener un
5.2. Importar sonidos
Utilizar sonidos exttengamos en formato dietc...Pero para que est di
importarlo.
Realmente debemos dsonidos, grficos, e includecirle a Flash que aadusarlo cuando queramos.que estn todos los objeto
As pues si queremos
previamente.
Una vez est importado,
Para importar un sonido
ar cualquier sonido que queramos en nuestras py muy efectiva, ya que es capaz de acelerar la d
rgue junto con nuestra pelcula.
ula efectos simples (el tpico "clic" al pulsardo) e incluso podemos hacer que la animasica (si bien esto ltimo necesitara que toda l
para evitar "atascos" durante el desarrollo delve a poner fcil.
idado al incluir sonidos, sobre todo si son mel
s active a travs de un botn, o si es necesariocontrol fcilmente localizable para silenciarlo.
rnos . Podemos insertar en una pelcula deital: grabados por nosotros mismos, descarsponible en nuestra pelcula y podamos usarlo,
importar a flash cualquier archivo externo qo con otras pelculas Flash. Importar por tant
un determinado archivo a nuestra pelcula,En realidad, lo aade a nuestraBiblioteca, qu
que participan en la pelcula (este panel se ver
manejar un sonido en nuestra pelcula, deb
podremos usarlo con total libertad.
az clic en el menArchivo Importar Imp
29
elculas (.wav, .aiff,escarga del sonido
un botn), efectoscin se desarrolle
pelcula estuvierala animacin). En
das. Es preferible
ue se reproduzcan
Flash sonidos queados de internet,antes debemos de
e queramos usar:o, no es ms queara que podamoses el Panel en elms adelante).
eremos importarlo
rtar a biblioteca .
-
8/2/2019 Curso de CS5
30/113
30
Se abrir el cuadro de dilogo deImportar a biblioteca . All debers seleccionar enTipo de archivoTodos los formatos de sonido .
Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tupelcula. Seleccinalo haciendo clic sobre l y haz pulsa el botnAceptar.
El sonido estar listo para usarlo donde quieras, podrs encontrarlo en laBiblioteca (menVentana Biblioteca).
Utilizar los sonidos incorporados . Flash ya incluye una serie de sonidos incorporadosque podemos importar a nuestro proyecto. Se trata principalmente de sonidos como disparos,risas, sonidos animales, etc. Los podemos encontrar a travs del menVentana Bibliotecas comunes Sonidos . Se abrir un panel como el siguiente:
-
8/2/2019 Curso de CS5
31/113
31
Para incorporar alguno de estos sonidos a nuestra biblioteca de proyecto, no tenemos msque arrastrarlos desde este panel.
Unidad 5. Sonidos en Flash (II)
5.3. Propiedades de los sonidos
En Flash CS5, al igual que en versiones anteriores, todo lo referente a los sonidos lopodemos editar desde el PanelPropiedades . Aqu tenemos todo lo necesario para insertar,modificar y editar el sonido que acabamos de importar. Si no hemos importado ningn sonido,
nos daremos cuenta de que no podemos seleccionar nada en dicho panel, basta insertarlopara que esto cambie.
Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic enseleccionar el fotograma en el que queremos reproducir el sonido , tras hacer esto, elPanel Propiedades toma el siguiente aspecto:
Veamos las partes que tiene este panel.
Nombre: En este desplegable nos aparecern los sonidos que tenemos importados en laBiblioteca. Deberemos seleccionar la cancin que pretendamos aadir a nuestra pelcula (enel siguiente punto veremos cmo insertarla). Si no queremos reproducir sonido,seleccionamosNinguno.
-
8/2/2019 Curso de CS5
32/113
32
Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como por ejemploque el sonido pase del canal izquierdo al derecho (esto crea la sensacin de que el sonido te
envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos de losverdaderos sonidos envolventes), que el volumen aumente progresivamente etc... Sideseamos aadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido conalgn programa creado especficamente para este propsito antes de importarlo.
En el puntoEditar Sonidos se tratar en ms profundidad estos efectos.
Sinc: Esta opcin nos permite determinar en qu momento comenzar a actuar nuestrosonido, estas son las opciones que tenemos:
Evento: Sincroniza nuestro sonido con un evento determinado. Es la opcin por defectoy provoca que el sonido se empiece a reproducir al pasar la pelcula por el fotograma enel que est situado. Tambin se puede sincronizar el sonido con botones y los demstipos de smbolos. El sonido se repetir completamente, y si lo ejecutamos varias veces,se reproducir de nuevo, aunque no hubiese acabado, provocando que el sonido sesolape.Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si ya seest reproduciendo, no se reproduce de nuevo.Detener: Detiene el sonido seleccionado.
Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que est asociado,por tanto, si la carga de la pelcula es lenta y las imgenes no fluyen adecuadamente, elsonido se detendr para sincronizarse con ellas. Este efecto puede dar la sensacin deque la pelcula se corta de un modo muy brusco (pensar en que se considera normalque una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce,produce una reaccin muy negativa en los que pueden estar viendo nuestra pelcula).Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el
-
8/2/2019 Curso de CS5
33/113
efecto de que un precomendable que el
Repetir: Determina elde la derecha. Tambin pse reproduzca en un bucle
No recomendamos inseestar sincronizados los sofotogramas que las contetamao de la pelcula.
Unidad 5. Sonidos
5.4. Insertar sonido en
Al aadir un sonido dirPor tanto, el sonido se codetenido. Esto es til, por
Lo mejor sercrear unCreamos un fotograma clael sonido, y loarrastradirectamente desde el pan
Con el fotograma de lseccin de Sonido .
Seleccionamos losefec
En el menSinc.selecqueremos que cada vez qse mueve un objeto, selecdel sonido a partir de ah,ms adelante, seleccionseleccionado el mismo son
rsonaje hable durante una pelcula. En estasonido y las imgenes estn sincronizadas.
l nmero de veces que se reproducir el sonidoedes seleccionar Reproducir indefinidamente hasta llegar al siguiente fotograma clave.
rtar sonidos con la opcin Flujo y a la vez la denidos con las imgenes, provocaramos que lngan) se dupliquen tambin, aumentando co
n Flash (III)
lnea de tiempo
ctamente sobre la lnea de tiempo, lo asociamenzar a reproducir en ese fotograma, y contin
jemplo, para agregar msica a la pelcula.
nueva capa para cada sonido . As lo controlve en el momento en que queremos que comieos de la biblioteca al escenario . Tambin
el de Propiedades .
nueva capa seleccionado, accedemos a sus
os deseados, y las veces que lo queremosRep
ionamos la opcin de sincronizacin deseaue se pase por ah, se lance un sonido breve,ionaremosevento . En cambio, si queremos inimarcamos Inicio. Si queremos iniciar el sonidmos Detenido, y lo iniciamos creando unido.
33
situacin, es muy
segn lo indiquespara que el sonido
Repetir, ya que als imgenes (y lossiderablemente el
s a un fotograma.ar hasta que sea
aremos fcilmente.nce a reproducirsepodemos elegirlo
propiedades , a la
tir.
a. Por ejemplo, siorque por ejemploiar la reproduccino en un fotograma
fotograma clave,
-
8/2/2019 Curso de CS5
34/113
34
As representa Flash los sonidos insertados en Fotogramas
Por defecto, Flash entiende que queremos reproducir el sonido completo, si no por quimportarlo todo cuando genera un archivo ms grande? Por supuesto, podemos hacer que elsonidose detenga en un fotograma determinado . Para ello,creamos un fotograma clave ,y con el mismo sonido seleccionado, elegimosDetener en el desplegableSinc.
Otra sera utilizar la opcinFlujo.
Al seleccionar esta opcin, el sonido se reproducir hasta que se acabe o llegue a unfotograma clave, siguiendo la pelcula. Slo es aconsejable esta opcin si realmente lanecesitamos.
Para practicar la insercin de sonidos realiza elEjercicio paso a paso Trabajar consonidos.
Unidad 5. Sonidos en Flash (IV)
-
8/2/2019 Curso de CS5
35/113
35
5.5. Sonidos en botones
Es muy comn insertar un breve sonido al pulsar un botn, as el usuario percibe que esebotn "hace algo".
Como veremos ms adelante, los botones tienen su propia lnea de tiempo, con susdistintos estados. Por eso, no tenemos ms que insertar los sonidos para cada estado.
Lo que s debemos de tener en cuenta, es en usar la opcin deSincronizacin Evento ,para que se reproduzca el sonido en su totalidad.
5.6. Editar Sonidos
Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo eslimitada. An as, los efectos que permite aplicar de un modo sencillo suelen ser suficientespara cualquier animacin que queramos realizar. Disponemos de estos efectos del panelPropiedades :
Canal Izquierdo: El sonido tan slo se escuchar por el altavoz izquierdo.
Canal Derecho: El sonido tan slo se escuchar por el altavoz derecho.
Desvanecimiento de izquierda a derecha : El sonido se reproduce inicialmente en elaltavoz izquierdo para luego pasar al derecho.Desvanecimiento de derecha a izquierda : El sonido se reproduce inicialmente en elaltavoz derecho para luego pasar al izquierdo.Aumento Progresivo : El volumen de nuestro sonido aumenta progresivamente.
Desvanecimiento : El volumen de nuestro sonido disminuye progresivamente.
Personalizado : Esta opcin nos permite "editar" el sonido de un modo rpido y sencillo.Desde este editor podemos decidir qu volumen tendr nuestro sonido y en qu altavoz.Podemos crear los efectos anteriores ajustndolos a nuestro gusto y podemos crearefectos ms complejos a nuestra medida.
-
8/2/2019 Curso de CS5
36/113
36
Esta es la apariencia del cuadro de dilogoPersonalizar Sonido . La parte superiorrepresenta el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay unalnea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto.
Las lneas grises representan el volumen del sonido y haciendo clic en ellas podemosconfigurar este volumen.
En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen est almximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumennormal (este efecto equivaldra a un Aumento Progresivo en el canal derecho).
Unidad 5. Sonidos en Flash (V)
5.7. Mp3 o Wav?
Como ya se ha comentado, los sonidos que Flash CS5 puede importar casi cualquier tipode sonido, aunque los ms empelados son MP3 y WAV. Si no sabes las diferencias entreestos tipos de archivos, puedes consultar nuestro tema bsico .
Por tanto, cuando queramos aadir un sonido a nuestra pelcula, deberemos decantarnospor uno de estos 2 formatos. Lo normal es que el sonido que pretendamos insertar ya est enuno de ellos, pero no debemos olvidar que existen multitud de programas que convierten un
-
8/2/2019 Curso de CS5
37/113
37
sonido con extensin .mp3 a uno .wav y viceversa, por lo que no debe ser inconveniente elformato que tenga el sonido en un principio.
La pregunta surge en seguida Cul es mejor?
Esta pregunta es ms importante de lo que parece, ya que si decidimos que nuestrapelcula tenga sonidos, deberemos asumir una carga muy importante en cuanto a tamao dela pelcula y en consecuencia en cuanto a tiempo de descarga. Lo habitual es que los sonidosocupen ms de la mitad del espacio total y muchas veces no valdr la pena insertarlos...
Una vez decididos a insertar el sonido, la lgica nos dice que insertemos el sonido queocupe un espacio menor en el disco duro, ya que este espacio es el que ocupar en nuestrapelcula. Esto es una aproximacin, ya que Flash comprime todo aquello que insertamos ennuestras pelculas.
Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los sonidos.wav (10 veces menos o ms), por lo que parece recomendable insertar .mp3 en lugar de.wav, ahora bien Puede Flash comprimir un sonido ya comprimido? Es decir, si un sonido.wav ha sido comprimido y ahora tiene extensin .mp3, podr Flash volver a comprimirlo? Larespuesta es NO. Flash comprime los sonidos que insertamos en nuestras pelculas, pero si el
sonido resulta estar ya comprimido, no podr volver a comprimirlo (en realidad si queconsigue comprimirlo, pero el sonido final es el mismo que el inicial).
Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav ms de loque comprime el formato .mp3, para ver bien este aspecto, hemos preparado variosejemplos...
Ejemplo:
Contamos con una pelcula con un nico frame que est vaco. Esta pelcula, una vez lista
para ser vista (.swf) ocupa 1KB.
Tenemos 1 sonido .wav que ocupa 1596 KB
Comprimimos dicho sonido con un programa compresor de audio y obtenemos el mismosonido en formato .mp3, ocupa 145 KB. (La calidad de sonido es prcticamente idntica).
Ahora insertamos el sonido .wav en la pelcula original y la exportamos (esto se trata en elltimo tema).
-
8/2/2019 Curso de CS5
38/113
Resultado : Una pelcul
Insertamos despus el s
Resultado : Una pelcul
Conclusin : La pelculamismo sonido en .mp3, pode audio que logra Flashcalidad en el sonido que stipo de sonido que sea.necesariamente deber espierda calidad, el resultadde menor tamao. Lo mejo
Puedes ver varias prueb
Pelcula con sonido (msica)
Tamao Total:Calidad:Buena
Pelcula con sonido (voz) eTamao Total:Calidad:Regular
En el primer caso serambos sonidos son buenoque aunque tenga mayor t
Por ltimo, comentar qusi estamos empeados enpodemos conseguir un pro
con sonido (pelcula 1) que ocupa 37KB.
onido .mp3 en la pelcula original.
con sonido (pelcula 2) que ocupa 145 KB
con un sonido .wav ocupa casi 5 veces menosr tanto parece recomendable insertar sonidos .s muy grande). Como contrapartida, podra apre escucha en la pelcula 1. Esta prdida ser iSi es una voz, por ejemplo, deberamos inscucharse bien, si es msica de fondo, es proba
final sea aceptable y sea conveniente quedarr es probar ambas versiones y evaluar el resulta
as en estas pelculas:
Msica de Fondo
en formato.wav.
37 KB.
Pelcula con sonido (msica)
Tamao Total:Calidad:Buena
Sonido "Voz"
n formato .wav.9 KB.
Pelcula con sonido (vTamao Total:Calidad:Buena
recomendable quedarse con la pelcula ms. En el segundo caso, la segunda pelcula seramao, la calidad del sonido merece la pena.
e Flash no puede importar sonidos en formato Mque en nuestra animacin el sonido sea un MI
grama que convierta el sonido MIDI a WAV o M
38
que la que tiene elav (la compresin
eciarse prdida deportante segn elrtar .mp3 ya que
ble que aunque senos con la pelculao.
en formato.mp3.
145 KB.
z) en .mp3.67KB.
pequea, ya quems apropiada, ya
IDI (.mid). An as,I y no queremos o3 existe una forma
-
8/2/2019 Curso de CS5
39/113
39
de hacerlo consistente en el uso combinado de Flash y Javascript. Igualmente, como secoment en el Tema 1, Flash CS5 permite cargar sonidos de un modo dinmico (sin que
ocupen espacio), esto se tratar en el Tema 17 "Action Script".
Ejercicios del Tema 5. Prueba evaluativa del Tema 5.
Unidad 6. Trabajar con objetos (I)
6.1. Los objetos en Flash Qu son?En los primeros temas vimos las herramientas para dibujar elementos en nuestra pelcula,
obteniendo formas. En este tema profundizaremos en cmo trabajar con estas formas uobjetos, para ajustarlos a nuestras necesidades.
Independientemente de si estamos trabajando en una animacin, en una pgina web, en uncatlogo para un DVD o en cualquier otra cosa, tendremos que trabajar con objetos. A
grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestrapelcula y sea visible, de modo que podamos trabajar con l, por ejemplo, cualquier imagenque creemos o importemos, un botn, un dibujo creado por nosotros mismos etc...
Los objetos de dibujo 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 siemprey su color ser el indicado en elColor de Trazo (dentro del PanelMezclador de Colores ). Si
queremos dibujar creando Bordes deberemos emplear las HerramientasLpiz, Lnea oPluma y si queremos que nuestro dibujo no tenga borde, bastar con seleccionar el borde ysuprimirlo (ver siguiente punto).
El Relleno: El relleno no es ms que el propio objeto sin borde. Es, por tanto, la parteinterna del objeto. Su existencia tambin es arbitraria, ya que podemos crear un objeto cuyocolor de relleno sea transparente, como ya se vio en el tema de Dibujar, y por tanto, parecerque dicho objeto no tiene relleno, aunque en realidad s que exista pero sea de color
-
8/2/2019 Curso de CS5
40/113
transparente. Para dibujarPincel o el Cubo de Pintu
6.2. Seleccionar
Para poder trabajar conqueramos modificar (moveun objeto seleccionadas tpara indicar que estn sele
Veamos cmo selecci
Seleccionar un Rellenque queramos seleccionar.
Seleccionar el Relleno
Rellenos (sin borde) podemos usar herramiera.
objetos, es fundamental saber seleccionar la pr, girar, cambiar de color...). Podremos observaoman una apariencia con textura (entramadoccionadas.
Objeto SIN seleccionar
Objeto con el BORDE seleccionado
Objeto con el RELLENO seleccionado
onar las diferentes partes de un objeto:
o un Borde : Basta hacer clic 1 vez en el Rel
y el Borde de un objeto : Hacer doble clic en el
40
tas tales como el
arte del objeto quer que las partes dee puntos blancos)
leno o en el Borde
Relleno.
-
8/2/2019 Curso de CS5
41/113
Seleccionar todos losHacer doble clic sobre una
Seleccionar un Smbogrupo. Estos tipos de objecapa) al estar seleccionad
Seleccionar Varios elmientras seleccionamos lo
Seleccionar los objetusaremos la Herramientaarrastraremos el cursor hseleccionar. Si esta rea cest dentro del rea queusar la tecla SHIFT y selec
Este modo de selecciadems de permitirnospegarlas...
Adems de la Herramietil an si cabe. Nos perdeterminamos nosotros) dseleccionadas no tienen p
Seleccionar a partir deen la lnea de tiempo, sefotograma. Esto es til par
Seleccionar Todo : La fmen Edicin Seleccio
Unidad 6. Trabajar
6.3. Colocando objeto
bordes (o lneas) de un mismo color que ede las lneas que tenga el color que pretendamo
lo, un texto, o un grupo : Clic en el Smbolo,tos mostrarn un borde de color azul (por defes.
mentos : Mantendremos pulsada la teclaSHs objetos que queramos.
s que se encuentran en una determinadSeleccin (flecha). Haremos clic en una parasta delimitar el rea que contenga los objeorta una forma, slo quedar seleccionada la pemos delimitado. Si quisiramos incluir dicho ocionar la parte del objeto que falta por seleccion
onar objetos permite seleccionar muchos objeleccionar determinadas zonas de los objet
ta Seleccionar , tambin podemos usar la Herrmite seleccionar cualquier zona de cualquierl objeto que sea. Al contrario que la Herramientrque ser rectangulares.
la Lnea de Tiempo: Si seleccionamos un deteeleccionan automticamente todos los objetosmodificar de un modo rpido todos los element
orma ms natural de seleccionar todo, consistenar Todo.
on objetos (II)
. Panel Alinear
41
stn en contacto :s seleccionar.
en el texto o en elto, depende de la
IFT (Maysculas )
zona: Para elloe del escenario yos que queremosarte del objeto quebjeto, bastara conr.
etos rpidamente,s, para cortarlas,
mienta Lazo, msorma (la forma laa Flecha, las reas
rminado fotogramaue estn en dichos del fotograma.
en hacer clic en el
-
8/2/2019 Curso de CS5
42/113
42
Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremosoportunas, veamos cmo colocarlos en el Escenario.
Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposicinel Panel Alinear. Este Panel lo podemos encontrar en el MenVentana Alinear. Asfunciona:
El Panel Alinear permite colocar los objetos tal y cmo le indiquemos. Antes de ver lasposibilidades, debemos hacer hincapi en la opcinAlinear en escenario . Esta opcin nospermite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen
como referencia el escenario.
Si esta opcin no est seleccionada, los objetos toman como referencia al conjunto deobjetos en el que se encuentran, y se colocan en funcin de ellos. Lo ms habitual esseleccionarEn Escenario , para que los objetos se coloquen segn los lmites de la pelcula,en el centro del fotograma etc...
Conozcamos un poco mejor el PanelAlinear y sus posibilidades:
Alineamiento: Sita los objetos en una determinadaposicin del fotograma (si est seleccionado En Escena). Las distintas opciones afectan atodos los elementos seleccionados y se emplean muy a menudo para situar los objetos endeterminados sitios predefinidos. Por ejemplo: Si quisiramos situar un objeto en la esquinainferior izquierda, bastara pulsar el primer y el sexto botn consecutivamente.
-
8/2/2019 Curso de CS5
43/113
43
Por ejemplo, si queremos que coincida el centro de dos objetos los alineamos al centrohorizontal y verticalmente.
Distribuir: Sita los objetos en el escenario en funcinde unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribucin de losmismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botn de laizquierda. Cada uno de los 2 cuadrados se situar en un extremo de la pelcula (uno arriba yotro abajo).
Coincidir Tamao: Hace coincidir los tamaos de los objetos. Si est
activoAlinear en escenario estirar los objetos hasta que coincidan con el ancho y el largode la pelcula. Si no est activo, la referencia ser el resto de objetos. Por ejemplo, si tenemos2 cuadrados distintos y la opcinAlinear en escenario no est activada, al hacer clic en elprimer botn de "Coincidir Tamao", el cuadrado ms estrecho pasar a tener la anchura delcuadrado ms ancho. Si Alinear en escenario hubiera estado activo ambos cuadradoshubieran pasado a tener el ancho del fotograma.
Espacio: Espacia los objetos de un modo uniforme.
-
8/2/2019 Curso de CS5
44/113
Para ver ejemplos de uprincipio del captulo.
Para practicar la aline
Unidad 6. Trabajar
6.4. Panel Informacin
Adems de controlar l
podemos hacerlo, de unInformacin.
A este Panel se puedede este Panel son limitadalas distribuciones de objet
Medidas del Objeto:nuestro objeto en la medireferencia a la anchura y
so de estos comandos, podis ver la animaci
acin te aconsejamos realizar elEjercicio Alinea
on objetos (III)
posicin de los objetos desde el Panel Alin
modo ms exacto (ms matemtico) desde ot
cceder desde el MenVentana Informacis, pero si buscamos exactitud en las medidass que crea Flash, debemos acudir a l.
Aqu introduciremos un nmero que represeda seleccionada en las Propiedades del docL: a la altura.
44
n situada arriba al
in de objetos.
eamiento, tambin
ro panel, el Panel
. Las posibilidadesno nos fiamos de
nte el tamao demento. AN: hace
-
8/2/2019 Curso de CS5
45/113
Situacin del objeto :La Xy la Y representan el
Las medidas tambin vanse toman desde la esquina
Color Actual: IndicAzul (A) y transparencia
Este indicador puede seel que en ese momento pun objeto (haciendo clic e
desplazar el ratn, el vseleccionado, sino el delcometer errores o perder ti
Posicin del Cursor:algo en la pelcula al pasadel objeto en lugares espe
6.5. Los grupos
Un grupo no es ms qforman un grupo, ya que pPara ello, basta selecciodespus hacer clic en el M
Tras hacer esto observaestaban seleccionados y
imposible seleccionar a uAdems, aparece el rectn
Desde aqu controlamos laposicin del objeeje de coordenadas (La X es el eje Horizontal y
en funcin de las medidas elegidas para la pelcsuperior izquierda de la pantalla (X=0 e Y=0).
el color actual en funcin de la cantidad deRlfa (A)que contenga.
r engaoso, el motivo es que indica el color quesamos el cursor del ratn. Por tanto, podemosl) y ver en el Panel Informacin su tamao y
lor del color cambiar y ya no indicar elobjeto por el que pase el cursor. Tened estoempo innecesario.
Indica la posicin del cursor. Es til por si quer el cursor justo por una posicin determinadaficos.
e un conjunto de objetos. Si bien no cualquierra crear un grupo, debemos indicarle a Flash qar los objetos que queremos que formen pa
en Modificar Agrupar (Ctrl + G).
remos que desaparecen las texturas que indicaobservamos que el grupo pasa a ser un "tod
o de sus miembros sin que se seleccionen agulo azul (por defecto) que rodea al grupo, defini
45
to en el escenario.la Y el eje vertical).
ula. Estas medidas
jo (R), Verde (V),
tiene el objeto portener seleccionadou posicin, pero al
l color del objetoen cuenta para no
remos que sucedapara situar partes
onjunto de objetose as lo queremos.
rte de un grupo y
an que los objetoso", ya que resulta
su vez los dems.ndolo como tal.
-
8/2/2019 Curso de CS5
46/113
46
Crear grupos es muy til, ya que nos permite, como ya hemos dicho, tratar al conjunto deobjetos como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrndonos la labor
de hacerlo de objeto en objeto.
Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches.Tras dibujarlos todos, nos damos cuenta de que queremos aumentar el tamao de los coches.Podemos aumentar el tamao de los coches de uno en uno, corriendo el riesgo de aumentarunos ms que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo conlos coches y aumentar el tamao del grupo, de modo que aumenten todos de tamao a la vezy en la misma proporcin. De igual modo, podemos mover al grupo de posicin, hacer quegire...
Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjuntode objetos y, en ningn caso perdemos nuestro objeto. En cualquier momento podemosdeshacer el grupo, mediante el MenModificar Desagrupar .
Adems, Flash nos permite modificar los elementos de un grupo sin tener quedesagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic en el MenEdicin EditarSeleccionado , o directamente hacemos doble clic sobre el grupo con laherramientaSeleccionar . Podremos editar los objetos que componen el grupo por separado
teniendo en cuenta que, como es lgico, los cambios realizados afectarn al grupo adems deal elemento en cuestin.
Unidad 7. Las capas (I)
7.1. Qu es una capa?
-
8/2/2019 Curso de CS5
47/113
47
Todo el mundo ha visto alguna vez cmo trabajan los dibujantes de dibujos animados. Ytodos hemos visto cmo colocan una hoja semitransparente (lminas de acetato) con dibujos
sobre otras y la superposicin de todas forman el dibujo final. Por qu no dibujan todo enuna misma hoja? Por qu trabajan con varios niveles y con varios dibujos si van a acabartodos juntos?
Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a lasCapas que utiliza Flash, y la mayora de programas de dibujo o retoque, como Photoshop.Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... conindependencia del resto de capas. Hay que tener en cuenta que todas las capas compartenla misma Lnea de Tiempo y por tanto, sus distintos fotogramas se reproducirnsimultneamente.
Clarifiquemos esto con un ejemplo:
Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen eldibujo de una portera de ftbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de unportero (del 5 en adelante estn vacos).
Pues bien, esta pelcula nos mostrar inicialmente (durante el tiempo que duren los
primeros 5 fotogramas) la portera con el portero, para despus (durante los fotogramas del 5al 10) mostrar la portera sin portero.
De este modo la portera es independiente del portero, y podemos tratar estos objetos contotal libertad, ya que no interfieren entre ellos para nada.
-
8/2/2019 Curso de CS5
48/113
48
Otra razn para separar los objetos en capas, es que Flashnos obliga a colocar cadaanimacin distinta en una capa . De lo contrario, todos los objetos que se encuentren endicha capa formarn parte de la animacin. Si queremos que un objeto no forme parte de unaanimacin, deberemos quitarlo de la capa en la que se produce dicha animacin.
Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que haga que elportero se desplace hacia un lado no hay ningn inconveniente, pero si la portera estuvieraen la misma capa que el portero, entonces ambos objetos se moveran hacia dicho lado, conlo que resultara imposible que slo se moviera el portero. La solucin es separar los objetosen 2 capas, como ya hemos hecho.
Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra pelcula de formalgica, y nos ayudan en la edicin de dibujos (evitando que se "fundan" en uno slo, obloqueando el resto de capas de modo que slo podamos seleccionar la capa que nosinterese).
Otro motivo es para organizar mejor nuestro contenido. Igual que crebamos una capapara los elementos de audio, crearemos capas para otros elementos, como el cdigoActionScript.
-
8/2/2019 Curso de CS5
49/113
Unidad 7. Las capa
7.2. Trabajar con capa
La vista estndar de undistintos botones y cmo u
Nueva capa : Como sactual. Crea capas normal
Crear carpeta : Nos scapas.
Borrar Capa : Borra
Cambiar Nombre: Paranombre actual.
Propiedades de Capa:podremos acceder a un paPodremos modificar todasde menor importancia.
s (II)
s
a capa es la que muestra la imagen. Veamossarlos.
u nombre indica, sirve paraInsertar una nuevas (en el siguiente punto se vern los distintos tip
irve para crear carpetas , que nos ayudarn a
la capa seleccionada.
cambiar el nombre a una capa, basta con ha
Si hacemos doble clic sobre el icono junto alnel con laspropiedades de la capa en la que hlas opciones que hemos comentado anteriorm
49
ara qu sirven los
capa en la escenaos de capas).
organizar nuestras
er doble clic en el
nombre de la capa,ayamos hecho clic.ente y alguna ms
-
8/2/2019 Curso de CS5
50/113
Aqu puedes cambiarTambin puedes bloquearl
Pero haremos especialveremos ms adelante en
Unidad 7. Las capa
7.3. Trabajar con capa
Mostrar / Ocultar Cap
pelcula. Es muy til cuandpermite ocultar todas a launa capa en concreto (o ppunto (o en la cruz) que se
Bloquear Capas :modificarlas hasta desblprocederemos como en elactual bajo el icono "Bloqu
iferentes opciones sobre la capa, como su na u ocultarla.
hincapi en la opcinTipo cuyas opciones,el curso.
s (III)
s. Opciones avanzadas
as : Este botn permitever u ocultar todo tenemos muchas capas y slo queremos vervez, para despus mostrar slo la actual. Paraara ocultarla) basta con hacer clic en la capa coencuentra bajo el icono "Mostrar / Ocultar capas
loquea la edicin de todas las capas, de modquearlas. Para bloquear o desbloquear un
punto anterior, clic en el punto o icono "Cerrojo"ar Capas".
50
ombre o su color.
Gua y Mscara,
s las capas de lana de ellas ya queactivar la vista derespondiente en el"
que no podremosa capa concreta,ituados en la capa
-
8/2/2019 Curso de CS5
51/113
51
Bloquear una capa es muy til cuando tenemos varios objetos juntos y en capas distintas yqueremos asegurarnos de que no modificamos "sin querer" alguno de ellos. Tras bloquear su
capa podremos trabajar con la seguridad de no modificar dicho objeto, ni siquiera podremosseleccionarlo, de modo que editaremos con mayor facilidad el objeto que queramos.
Mostrar/Ocultar capas como contornos : Este botn nos muestra/oculta loscontenidos de todas las capas como si slo estuviesen formados porbordes . De este modo yante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fcil ypodremos ver en qu capa est cada uno de ellos.
Tambin se puede activar o desactivar para cada capa de un modo similar a los anteriores
botones.
Veamos como se muestran estas opciones activadas y desactivadas.
En la primera imagen la capa actual no tiene ninguno de los botones activados, podemosobservar que en la columnaMostrar Capas aparece un punto. Este punto significa que no
est activada esta opcin, lo mismo sucede con el botnBloquear capas . En la columnaMostrar capas como contornos aparece un cuadrado con relleno, lo que simboliza que losobjetos se mostrarn completos y no slo sus contornos.
En la segunda imagen aparece una cruz situada bajo la columnaMostrar Capas , lo queindica que dicha capa no es visible en el escenario. Aparece un cerrojo bajo la columna"bloquear capas", lo que simboliza que la capa est bloqueada. Y en la columna "Mostrarcapas como contornos" NO aparece relleno. La capa se est mostrando en este modo y nopodremos ver los rellenos hasta deseleccionar esta opcin.
Adems, el color de los contornos ser diferente para cada capa, de modo que podamosdistinguirlas mejor. El color del contorno, coincidir con el indicado en cada capa. En esteejemplo podis ver cmo queda un objeto en funcin de tener activada o no la opcincontorno:
-
8/2/2019 Curso de CS5
52/113
7.4. Reorganizar las c
Como ya se ha comentotras. Lo primero y princip
comparten la misma lneatodas las capas se vernqu objeto est delante deCapas en la pelcula.Losaquellos que se encuentr
Es decir, si nos fijamos
El portero aparece dela
la capa "Portera", comodistribucin, basta con hachacia abajo hasta la posici
Veremos como los objsegn su capa se encuentr
pas
ado, las distintas capas tienen muchas cosas eal es la Lnea de tiempo , todas las capas de
de tiempos y por tanto, los objetos de todos loal mismo tiempo en la pelcula superpuestos ulos dems? Pues este criterio viene dado por lobjetos que se mostrarn delante de todos
en en la capa situada ms arriba .
n el ejemplo anterior:
te de la portera, porque la capa "Portero " est
puede apreciarse en la imagen. Si quisiraer clic en la capa que queramos mover y arrastn deseada.
tos se colocan delante o detrs de los de lae por encima o por debajo de la nuestra.
52
n comn unas conna misma escena
s fotogramas 1 deos sobre otros. ycolocacin de las
los dems sern
situada encima de
mos cambiar estararla hacia arriba o
capa seleccionada
-
8/2/2019 Curso de CS5
53/113
53
Para mover un objeto de una capa a otra, deberemos seguir unos sencillos pasos.
Aprende a hacerlo realizando el ejercicio paso a pasoMover objetos entre capas.
Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a mover yarrastrarlo hasta la capa donde queramos pegarlo. Tambin se puede Copiar el fotograma yluego pegarlo en la capa de destino.
Unidad 7. Las capas (IV)
7.5. Tipos de capas
Como habris podido comprobar al ver las propiedades generales de una capa o al hacerclic con el botn derecho del ratn sobre el icono de una capa cualquiera, existen varios tiposde capas.
-
8/2/2019 Curso de CS5
54/113
54
Capas normales : Son las capas por defecto de Flash y tienen todas las propiedadesdescritas en los puntos anteriores. Son las ms usadas y se emplean para todo,colocar
objetos , sonidos, acciones, ayudas...
Capas animacin movimiento : Son las capas que contienen una animacin porinterpolacin de movimiento.
Capas Gua / : Son capas especiales de contenido especfico. Se emplean en lasanimaciones de movimiento de objetos y su nico fin es marcar la trayectoria que debe seguirdicho objeto. Debido a que su misin es representar la trayectoria de un objeto animado, sucontenido suele ser una lnea (recta, curva o con cualquier forma).
En esta imagen podemos ver el contenido de 2 capas. La primera de ellas contiene la bolaazul y la segunda contiene la lnea curva. La segunda capa la hemos definido como CapaGua, para que al realizar la animacin de movimiento (esto lo veremos en un tema posterior)su contenido no se vea en la pelcula, sino que sirva de recorrido para la bola azul .
Es importante recordar que el contenido de las Capas Gua no se ver en la pelcula final.Su efecto har que la pelota azul se desplace de un extremo de la lnea al otro siguiendo esaruta.
Capas guiadas (Guided Layers) : Definir una capa como gua no tiene sentido hasta
que definamos tambin una capa guiada. Esto es, unacapa que quedar afectada por lagua definida en la Capa gua .
Si no definimos una capa guiada, la capa gua no tendr ningn efecto y si bien no se veren la pelcula (por ser una capa gua) tampoco provocar ningn efecto en las dems capas.En la imagen anterior, la bola azul se deber encontrar en una capa Guiada, de lo contrario noseguir la ruta marcada por la capa gua.
-
8/2/2019 Curso de CS5
55/113
55
Las capas gua y las capas guiadas se relacionan entre s de un modo evidente. A cadacapa gua le corresponden una serie de capas guiadas.
Al asociar una capa gua con una capa guiada, el icono que representa a la capa guacambia, indicndonos que est realizando correctamente su labor.
En la imagen podemos ver un ejemplo de capa gua y capa guiada correctamenteasociadas entre s. (La capa llamada inferior es, evidentemente, la capa con Gua)
El funcionamiento de las Capas Gua y sus utilidades lo veremos a fondo en el tema de lasAnimaciones
Capas Mscara : Estas capas se pueden ver como plantillas que tapan a las capasenmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo complejo(tampoco demasiado) y se analizar en temas posteriores.
Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran yslo dejan que se vea la parte de stas que tapan los objetos situados en las capas mscara(son como filtros). Al igual que las capas gua, los objetos existentes en este tipo de capastampoco se ven en la pelcula final. S se vern los objetos de su correspondiente capaenmascarada a los que estn "tapando".
Capas Enmascaradas : Estas capas funcionan conjuntamente con las anteriores, yaque son las capas que estn bajo las mscaras y a las que afectan . Al igual que las capasgua y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto.
Sus objetos s que son visibles en la pelcula final, pero slo cuando algn objeto de la capaMscara est sobre ellos.
Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, losrectngulos azules forman parte de la Capa Enmascarada y por tanto se vern en la pelculafinal (pero slo lo que tape la capa mscara). El valo rojo est situado en la capa Mscara yno se ver en la pelcula, pero slo se ver lo que l "tape", que es lo que se ve en la imagende la derecha. As se emplean las mscaras...
-
8/2/2019 Curso de CS5
56/113
Podis poner a prueba v
Unidad 8. Smbolos
8.1. Qu son los smb
Los Smbolos provieneproporciona Flash CS5.
Estos objetos al ser trmomento en que son cr(instancias ), ya sea en
fundamentales a la hora d
8.2. Cmo crear un s
La accin de crear un nlos primeros pasos para cr
El procedimiento es el si
1. Seleccionamos el oes partir de una form2. Abrimos a la ventan
Smbolo, desde elcon las teclas Ctrl
3. Una vez hecho estIntroducimos el nidentificarlo en la bismbolos.
uestros conocimientos realizando:
(I)
los
de objetos que hemos creado utilizando las he
nsformados en smbolos, son incluidos en uados, lo que permite que sean utilizados ela misma o en otra pelcula. Los smbol
crear nuestras animaciones.
bolo
evo smbolo es una de las ms usadas en Flasear una animacin, como veremos ms adelante
guiente:
los objetos que queramos convertir en un smbo.Convertir en smbolo , accediendo al men
en contextual eligiendoConvertir en smboF8 o F8.
nos aparecer una ventana como la mostrmbre del smbolo que vamos a crear, ylioteca, lo que se har imprescindible cuando
56
ramientas que nos
a biblioteca en elvarias ocasiones
s nos resultarn
ya que es uno de.
lo. Lo ms habitual
Insertar Nuevolo, o directamente
da en la imagen.ue nos permitir
tengamos muchos
-
8/2/2019 Curso de CS5
57/113
4. Slo nos queda seleconvertir nuestro objcaractersticas y lashabitual es Clips de
Botn si queremos q5. Bastar con pulsarA
Para practicar estas o
Unidad 8. Smbolos
8.3. Las Bibliotecas
En Flash CS5 podemosejemplos y aquellasasocia nuestra disposicin para
Para acceder a las bibli
a al men Ventana
BibLas hay de todo tipo de s
ccionar el tipo de smbolo (desplegable Tipo to. Podemos elegir entreClip de Pelcula, Bo
diferencias entre ellos las veremos en temas ppelcula para los objetos que queremos mostrar
e acte como tal.eptar para tener nuestro smbolo creado.
peraciones te aconsejamos realizarEjercicio Cre
(II)
encontrar dos tipos de bibliotecas,las bibliotedas a las pelculas que hemos creado . Toda
utilizar los smbolos que contienen.
tecas comunes que nos ofrece Flash simpleme
liotecas Comunes y seleccionar alguna de lasbolos: botones, clips o grficos.
57
al que queremosn y Grfico. Susosteriores. Lo msen el escenario, y
ar un smbolo.
as comunes y deellas las tenemos
nte tenemos que ir
ue se nos ofrecen.
-
8/2/2019 Curso de CS5
58/113
58
Para acceder a la biblioteca de smbolos de la pelcula que estamos creando, de nuevovamos a la Barra de Mens,Ventana Biblioteca. En esta biblioteca aparecern todos lossmbolos que hemos creado hasta el momento.
Podemos comprobar como el nuevo smbolo que hemos creado en el ejercicio paso a pasode la unidad anterior se ha aadido a nuestra biblioteca accediendo a ella como acabamos deindicar.
Los smbolos contenidos en las bibliotecas estn identificados por su nombre y por un iconoque representa el tipo de smbolo que representan:
Clip Botn Grfico
8.4. Diferencia entre smbolo e instancia
Como hemos comentado anteriormente, cuando creamos un smbolo, Flash lo almacena enuna biblioteca. Pues bien, cada vez que utilicemos ese objeto en una pelcula, ste seconvierte en una instancia del smbolo.
Por tanto,podemos crear muchas instancias de un smbolo , pero a una instancia solo lecorresponder un smbolo.
Aunque parece que sean lo mismo, la importancia de esta distincin es que cuandoutilicemos un smbolo que hayamos creado previamente en una pelcula y lo modifiquemos,solo alteraremos sa instancia, mientras que el objeto seguir intacto, tal y como era en el
-
8/2/2019 Curso de CS5
59/113
59
momento de su creacin, de manera que podremos volverlo autilizar en otro momento. En cambio, si modificamos el smbolo
de la biblioteca, alteraremos todas sus instancias.
A la derecha tenemos un ejemplo de una biblioteca. Cadaelemento de la biblioteca es un smbolo.
Para entender mejor este concepto te aconsejamosrealizarEjercicio Modificar una instancia.
Unidad 8. Smbolos (III)
8.5. Modificar una instancia
Hemos visto en el ejercicio anterior que podemos modificar una instancia de un smbolo sinmodificar el smbolo original en cuestin. Sin embargo, al no tratarse de un grfico vectorial(veremos que significa esto ms adelante), no podemos modificar las instancias con lasherramientas de dibujo de Flash CS5, pero s mediante el Panel dePropiedades , que permitela manipulacin "externa" de la instancia.
As, este panel, que como hemos visto resulta sumamente til, no nos permite modificarla estructura bsica de la instancia, pero s otras propiedades, esto es, podremos hacer que lainstancia tenga ms brillo, pero no transformar una estrella en un crculo).
Esos cambios debemos de hacerlos directamente sobre el smbolo. Aunque s podremoscrear un smbolo a partir de una instancia, lo que desvincular la instancia del smbolooriginal.
8.6. Panel propiedades de instancia
Para acceder al panel de propiedades de instancia, debemos seleccionar en primer lugar lainstancia que queramos modificar y posteriormente abrir el panelPropiedades .
Si seleccionamos un objeto Flash que no se trate de un smbolo, el PanelPropiedades mostrar las propiedades del objeto en cuestin, pero no las caractersticas propias de lossmbolos (cambios de color, intercambios etc...)
-
8/2/2019 Curso de CS5
60/113
60
En el momento que seleccionemos un smbolo aparecern una serie de propiedades yopciones que comentamos a continuacin:
Nombre y su icono correspondiente : El nombre de la instancia es muy importante,pues permite identificarla durante la pelcula, y veremos ms adelante que resultaimprescindible para acceder mediante ActionScript. El nombre, se introduce en elrecuadro donde pone por defecto , y debe de ser nico. Elicono asociado nos permite saber qu tipo de smbolo es de un vistazo rpido.Tipo de la instancia . Por defecto se nos muestra el tipo al que perteneca el smbolooriginal pero nosotros podemos cambiarlo para que cambie su comportamiento, aunquepueda seguir manteniendo su estructura inicial (en la imagen esBotn).
Smbolo de la Instancia seleccionada ( Instancia de: ). Esta opcin nos muestra elsmbolo raz del que proviene la instancia que estamos modificando.
Intercambiar : Esta opcin merece especial atencin, pues es muy til y nos ahorrarmucho trabajo cuando sea necesaria emplearla. Su funcin consiste en cambiar elsmbolo de