Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Flash8 Tutoriales
Flash8 Tutoriales
Marcas comerciales
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder,
Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit,
Studio MX, UltraDev y WebHelp son marcas registradas o marcas comerciales de Macromedia, Inc. y pueden estar registradas en
Estados Unidos o en otras jurisdicciones, incluidas las internacionales. Otros nombres de productos, logotipos, diseos, ttulos,
palabras o frases mencionados en esta publicacin pueden ser marcas comerciales, marcas de servicio o nombres comerciales de
Macromedia, Inc. o de otras entidades y pueden estar registrados en ciertas jurisdicciones, incluidas las internacionales.
Informacin de terceros
Esta gua contiene vnculos a sitios Web de terceros que no estn bajo el control de Macromedia y, por consiguiente, Macromedia
no se hace responsable del contenido de dichos sitios Web. El acceso a uno de los sitios Web de terceros mencionados en esta gua
ser a cuenta y riesgo del usuario. Macromedia proporciona estos vnculos nicamente como ayuda y su inclusin no implica que
Macromedia se haga responsable del contenido de dichos sitios Web.
La tecnologa de compresin y descompresin de voz tiene licencia de Nellymoser, Inc. (www.nellymoser.com).
La tecnologa de compresin y descompresin de vdeo Sorenson Spark tiene licencia de
Sorenson Media, Inc.
Navegador Opera Copyright 1995-2002 Opera Software ASA y sus proveedores. Todos los derechos reservados.
Macromedia Flash 8 utiliza tecnologa de vdeo de On2 TrueMotion. 1992-2005 On2 Technologies, Inc. Todos los derechos
reservados. http://www.on2.com.
Visual SourceSafe es una marca registrada o un marca comercial de Microsoft Corporation en Estados Unidos y/u otros pases.
Copyright 2005 Macromedia, Inc. Todos los derechos reservados. No se permite la copia, fotocopia, reproduccin,
traduccin ni la conversin en formato electrnico o legible por equipos, ya sea de forma total o parcial de este manual, sin
la autorizacin previa por escrito de Macromedia, Inc. No obstante, el propietario o usuario autorizado de una copia
vlida del software con la que se proporcion este manual puede imprimir una copia del manual a partir de una versin
electrnica del mismo, con el solo fin de aprender a usar dicho software, siempre que no se imprima, reproduzca, revenda
o transmita ninguna parte de este manual para cualquier otro propsito, incluidos, sin limitacin, fines comerciales, como
la venta de copias de esta documentacin o el suministro de servicios de soporte pagados.
Agradecimientos
Direccin del proyecto: Sheila McGinn
Redaccin: Jay Armstrong, Jen deHaan
Direccin de la edicin: Rosana Francescato
Editor jefe: Lisa Stanziano
Edicin: Evelyn Eldridge, Mark Nigara, Lisa Stanziano, Anne Szabla
Direccin de la produccin: Patrice ONeill, Kristin Conradi, Yuko Yagi
Produccin y diseo multimedia: Adam Barnett, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Masayo Noda,
Paul Rangel, Arena Reed, Mario Reynoso
Reconocimiento especial a Jody Bleyle, Mary Burger, Lisa Friendly, Stephanie Gowin, Bonnie Loo, Mary Ann Walsh, Erick Vera,
Jorge G. Villanueva, responsables de las pruebas realizadas a la versin beta, y a la totalidad de los equipos de diseo y control de
calidad de Flash y Flash Player.
Primera edicin: septiembre de 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103, EE. UU.
Contenido
Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Captulo 1: Tareas bsicas: creacin de un documento . . . . . . . . 13
Visita guiada de la interfaz de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Cambio del fondo y el tamao del escenario . . . . . . . . . . . . . . . . . . . . . . 17
Cambio de la vista del escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Visualizacin del panel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Adicin de grficos al escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Adicin de vdeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Visualizacin de las propiedades del objeto. . . . . . . . . . . . . . . . . . . . . . 20
Adicin de comportamientos de control de vdeo. . . . . . . . . . . . . . . . . . 21
Utilizacin del explorador de pelculas para ver la estructura del
documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Comprobacin del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Bsqueda de ayuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Captulo 2: Tareas bsicas: creacin de un anuncio para
Internet - Parte 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Creacin de un documento nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Cambio de propiedades del documento . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Importacin de grficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Presentacin de las capas y la lnea de tiempo . . . . . . . . . . . . . . . . . . . 38
Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Captulo 3: Tareas bsicas: creacin de un anuncio para
Internet - Parte 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Adicin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Creacin de un smbolo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Adicin de animacin a una lnea de tiempo . . . . . . . . . . . . . . . . . . . . . 54
Creacin de un botn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Creacin de acciones sencillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Captulo 4: Tareas bsicas: creacin de un anuncio para
Internet - Parte 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Anlisis del pblico al que va destinado . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Comprobacin de la configuracin de publicacin . . . . . . . . . . . . . . . . 75
Insercin de Flash en un sitio de Dreamweaver . . . . . . . . . . . . . . . . . . . 77
Utilizacin de edicin conjunta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Comprobacin de Flash Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Captulo 5: Tareas bsicas: creacin de contenido accesible de
Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85
Configuracin del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Cmo conseguir que los lectores de pantalla puedan acceder al
documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Cmo proporcionar un ttulo y una descripcin del documento . . . . . 87
Cmo proporcionar un ttulo y una descripcin para instancias . . . . . 88
Especificacin de que los lectores de pantalla omitan los
elementos del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Cambio de texto esttico por texto dinmico para obtener
accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Control del orden de tabulacin y del orden de lectura . . . . . . . . . . . . . 91
Comprobacin del documento con lectores de pantalla . . . . . . . . . . . 94
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Captulo 6: Tareas bsicas: trabajo con capas . . . . . . . . . . . . . . .95
Configuracin del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Seleccin de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Cmo ocultar y mostrar capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Bloqueo de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Adicin de una capa y asignacin de nombre . . . . . . . . . . . . . . . . . . . . . 99
Cambio del orden de las capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Organizacin de capas en una carpeta. . . . . . . . . . . . . . . . . . . . . . . . . . 100
Adicin de una capa de mscara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Adicin de una capa de guas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Eliminacin de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Contenido
Contenido
Contenido
Contenido
Contenido
Contenido
10
Contenido
Introduccin
En esta parte de la Ayuda de Flash se incluyen varios tutoriales detallados
diseados para ensearle los aspectos bsicos del funcionamiento de Flash.
Macromedia recomienda que siga las lecciones utilizando los archivos de
muestra proporcionados. Las rutas correspondientes a los archivos de
muestra aparecen en cada leccin.
Cuando complete estas lecciones prcticas, habr aprendido a utilizar Flash
para aadir texto, grficos y animaciones a las aplicaciones de Flash.
Asimismo, aprender lo fcil que resulta personalizar la aplicacin de Flash
mediante ActionScript y comportamientos.
Las lecciones estn pensadas tanto para usuarios sin experiencia como para
diseadores y desarrolladores de nivel intermedio que desean ponerse al da
rpidamente.
Cada leccin se centra en una funcin o un tema de diseo especficos de
Flash. Para completarlas, calcule entre 10 y 20 minutos en funcin de su
experiencia. En estas lecciones, aprender a crear documentos de Flash,
escribir cdigo ActionScript, trabajar con vdeo y con comportamientos de
control de vdeo, as como aadir componentes de Flash.
N OTA
11
12
Introduccin
CAPTULO 1
13
N OTA
14
2.
Arrastre alrededor del escenario, sin soltar el ratn, para dibujar una
lnea.
Ha creado contenido de Flash. Cuando el documento est terminado,
ser digno de admiracin.
Visita guiada de la interfaz de usuario
15
2.
16
Cabeza lectora
Fotograma clave
Selector de cambio de tamao
2.
3.
17
4.
2.
NO TA
18
2.
Adicin de vdeo
El panel Biblioteca incluye un archivo de vdeo Flash (FLV) importado.
Aadir el vdeo al documento y Flash aadir los fotogramas necesarios
para reproducir el vdeo.
Para ms informacin sobre la utilizacin de vdeo en Flash, consulte el
Trabajo con vdeo en Utilizacin de Flash.
1.
2.
3.
Adicin de vdeo
19
N OTA
20
2.
3.
Adicin de comportamientos de
control de vdeo
Los comportamientos permiten aadir funciones complejas al documento
con facilidad, sin necesidad de conocer ActionScript, el lenguaje de
creacin de scripts de Flash. Ahora va a aadir comportamientos para
controlar el vdeo.
1.
2.
3.
4.
5.
21
6.
7.
8.
N OTA
2.
3.
22
4.
5.
2.
Bsqueda de ayuda
Las lecciones proporcionan una introduccin a Flash y sugieren formas de
utilizar las funciones para crear exactamente el tipo de documento deseado.
Para obtener informacin completa sobre una funcin, un procedimiento o
un proceso descrito en las lecciones, consulte la ficha Ayuda del panel
Ayuda (Ayuda > Flash Ayuda).
Bsqueda de ayuda
23
Resumen
Enhorabuena! Ha creado un documento de Flash que incluye grficos, un
vdeo y comportamientos de control de vdeo. En unos minutos ha
aprendido a realizar las tareas siguientes:
Adicin de vdeo
Bsqueda de ayuda
24
CAPTULO 2
25
En las secciones posteriores seguir los pasos necesarios para crear su propia
aplicacin comenzando desde un archivo FLA totalmente nuevo.
26
27
28
Creacin de un documento
nuevo
Puede crear todo tipo de elementos distintos para la Web o para CD-ROM
y dispositivos que utilizan Flash 8. En primer lugar, crear un archivo con
la herramienta de creacin de Flash que se utiliza para crear archivos SWF.
Los archivos SWF son archivos que pueden colocarse en lnea al insertarlos
en una pgina Web. El complemento de Macromedia Flash Player
mostrar el archivo SWF para que los visitantes del sitio Web puedan verlo
o interactuar con el contenido.
El archivo SWF puede contener vdeo, sonidos en MP3, animaciones,
imgenes, datos, etc. La ventaja de utilizar un archivo SWF y no otros
formatos reside en que el complemento de Flash Player est increblemente
extendido. Comencemos con la creacin de un anuncio para Internet.
1.
29
N OTA
30
4.
N OTA
31
32
N OTA
33
2.
NO TA
4.
34
Importacin de grficos
Cuando se trabaja con Flash, a menudo se importan activos al documento.
Tal vez tenga un logotipo de empresa o un grfico que el diseador le ha
suministrado para el trabajo. Puede importar varios activos en Flash,
incluidos archivos de sonido, vdeo, imgenes de mapa de bits y otros
formatos de grfico (como PNG, JPEG, AI o PSD).
Los grficos importados se guardan en la biblioteca del documento. La
biblioteca almacena tanto los activos importados en el documento como
los smbolos creados con Flash. Un smbolo es un grfico vectorial, un
botn, una fuente, un componente o un clip de pelcula que se crea una vez
y se puede volver a utilizar varias veces.
De este modo, no es necesario que dibuje sus propios grficos en Flash:
puede importar la imagen predibujada de un gnomo desde el archivo de
origen del tutorial. Antes de seguir, verifique que ha guardado los archivos
de origen de este tutorial tal como se describe en Apertura del archivo FLA
finalizado y que ha guardado las imgenes en el mismo directorio que el
archivo banner.fla.
1.
Importacin de grficos
35
2.
3.
N OTA
5.
6.
36
Importacin de grficos
37
NOT A
38
1.
3.
39
4.
N OTA
Haga clic en Insertar capa para insertar una capa nueva encima de la capa
seleccionada actualmente.
2.
3.
40
4.
N OTA
2.
3.
41
4.
5.
42
Comprobacin de la aplicacin
Para terminar, puede comprobar el documento con Flash. De este modo,
comprobaremos el archivo SWF en Flash Player. Por ejemplo, puede ver
qu aspecto tendr el cdigo en Flash Player, cmo se reproducirn las
animaciones de la lnea de tiempo, comprobar la interactividad con el
usuario, etc. Este mtodo es mucho ms rpido que cargar el trabajo en un
servidor cada vez que quiera ver cmo se reproduce un archivo SWF.
1.
2.
NOT A
Comprobacin de la aplicacin
43
Resumen
Le felicitamos por haber finalizado el primer paso para crear un anuncio
para Internet en Flash. Hemos utilizado la herramienta de edicin de Flash
para crear un documento nuevo, aadir activos y manipular el archivo con
ayuda de distintas herramientas.
En muy poco tiempo, ha aprendido a utilizar el espacio de trabajo de Flash
para lograr realizar las siguientes tareas:
44
CAPTULO 3
45
En las secciones posteriores seguir los pasos necesarios para crear su propia
aplicacin comenzando desde un archivo FLA totalmente nuevo.
46
47
48
Los activos grficos incluyen una imagen de fondo de mapa de bits (el
gnomo) y el grfico de estrella que animaremos en el siguiente ejercicio.
Adicin de texto
Ahora aadiremos algn texto adicional al anuncio como elemento
decorativo. Puede aadir varios tipos de texto en un archivo Flash: texto
esttico, texto dinmico o texto de entrada. El texto esttico resulta til si
necesita aadir texto decorativo en el escenario o cualquier otro texto que
no requiera modificaciones y ni cargas desde una fuente externa. Utilice
texto dinmico si necesita cargar texto desde una archivo, una base de datos
o si necesita modificar el texto cuando el archivo SWF se reproduzca en
Flash Player. Utilice el texto de entrada cuando quiera que el usuario
escriba texto en un campo de texto. Puede utilizar ese texto y enviarlo a una
base de datos, hacer que manipule algn elemento del archivo SWF, etc.
Adicin de texto
49
Seleccione Insertar > Lnea de tiempo > Capa para insertar una capa
nueva. Haga doble clic en el nombre de la capa y escriba Texto para
cambiarle el nombre.
2.
3.
4.
5.
6.
7.
50
8.
la fuente del texto para que coincida con la de los pasos anteriores.
11.
Seleccione un tamao de fuente para que el texto sea grande pero quepa
en el escenario.
12. Repita los pasos 9 al 11 para aadir la frase Es un gnomo? debajo de las
51
continuar.
Una vez guardado el archivo, contine con el siguiente ejercicio,
Creacin de un smbolo.
NOT A
Creacin de un smbolo
Un smbolo es un objeto creado en Flash. Como ya descubrimos en la
primera parte, un smbolo puede ser un grfico, un botn o un clip de
pelcula y es posible reutilizarlo en el documento FLA actual y en otros
archivos FLA. Los smbolos creados se aaden automticamente a la
biblioteca del documento (Ventana > Biblioteca), por lo que es posible
utilizarlo varias veces en un mismo documento.
Al aadir una animacin, siempre debe animar los smbolos en Flash, no
animar grficos en bruto (grficos creados por usted) o activos en bruto
importados (por ejemplo, un archivo PNG). Por ejemplo, si dibuja un
crculo utilizando la herramienta valo en Flash, debera convertir el
grfico de crculo en un clip de pelcula para poder animarlo. De esta forma
se reduce el tamao del archivo SWF y se facilita la creacin de la
animacin en Flash.
En el siguiente ejercicio crear un smbolo de clip de pelcula. En ejercicios
posteriores estudiaremos cmo animarlo.
1.
2.
52
Creacin de un smbolo
53
3.
4.
54
2.
NOT A
55
3.
56
5.
6.
Seleccione el fotograma 15, elija Insertar > Lnea de tiempo > Fotograma
clave.
NOTA
57
8.
N OTA
10. Cambie
58
11.
59
12. Seleccione un
Tambin puede hacer clic con el botn derecho del ratn (Windows) o
hacer clic con la tecla Opcin presionada (Macintosh) en el fotograma y
seleccionar Crear interpolacin de movimiento en el men contextual.
13.
NO TA
60
16.
Creacin de un botn
Para crear un anuncio es preciso permitir que el usuario haga clic en
cualquier lugar del rea del anuncio para poder abrir una nueva ventana del
navegador. En Flash es muy fcil crear botones. El botn puede contener
un grfico con grficos de desplazamiento, sonidos e incluso sus propias
animaciones. Otra posibilidad es crear un botn invisible. Los botones
invisibles son tiles si desea crear zonas activas en el sitio Web o si quiere
que la zona en la que se puede hacer clic sea todo el anuncio sin alterar los
grficos. En el siguiente ejercicio aadiremos un botn invisible sobre los
grficos del anuncio.
N OTA
2.
Seleccione Insertar > Lnea de tiempo > Capa para crear una nueva capa.
Seguidamente, cmbiele el nombre y llmela Botn.
3.
4.
Creacin de un botn
61
5.
7.
8.
9.
Cambie el valor del cuadro de texto An. (anchura) a 160 y el del cuadro
de texto Al. (altura) a 600. A continuacin, cable el cuadro de texto X e
Y a 0 (vase la imagen siguiente).
62
11.
12. Haga doble clic en el nuevo botn del escenario para acceder al modo de
edicin de smbolos.
El rectngulo es ahora el primer fotograma Reposo del botn creado.
ste es el estado Reposo del botn: lo que los usuarios vern cuando el
botn se encuentre en el escenario. Pero lo que queremos es que el
botn no sea visible en absoluto en el escenario. Por lo tanto,
deberemos mover el rectngulo al fotograma Zona activa, que es el rea
activa del botn (la regin activa en la que el usuario puede hacer clic
para activar las acciones del botn).
13.
16.
Creacin de un botn
63
64
2.
3.
NO TA
Seleccione Insertar > Lnea de tiempo > Capa para insertar una nueva
capa. Seguidamente, cmbiele el nombre y llmela Acciones.
5.
6.
65
Comprobacin de la aplicacin
Hemos conseguido crear un anuncio para Internet de Flash con grficos y
animacin, y tambin hemos logrado que reaccione ante la pulsacin de un
botn. Ha finalizado su primer documento de Flash animado e interactivo.
Vemoslo ahora en accin en una ventana de navegador.
1.
2.
Haga clic en el anuncio para abrir la pgina Web. Se abrir una nueva
ventana del navegador y se mostrar el sitio Web de los gnomos.
3.
N OTA
66
Resumen
Le felicitamos por haber finalizado el siguiente paso para crear un anuncio
para Internet en Flash. Hemos utilizado la herramienta de edicin de Flash
para aadir texto, crear smbolos, realizar animaciones en la lnea de tiempo
y aadir interactividad a la aplicacin. En la segunda parte de este tutorial
ha aprendido a utilizar el espacio de trabajo de Flash para lograr realizar las
siguientes tareas:
Crear texto.
Crear smbolos.
Crear botones.
Escribir ActionScript.
Ahora tiene un anuncio que puede exportar y aadir en una pgina Web.
En la tercera parte de este tutorial publicaremos su trabajo y aadiremos el
archivo en un sitio Web de Dreamweaver.
Para continuar con la creacin de esta aplicacin, prosiga con la tercera
parte de este tutorial: Tareas bsicas: creacin de un anuncio para Internet
- Parte 3 en la pgina 69.
Resumen
67
68
CAPTULO 4
69
En las secciones posteriores seguir los pasos necesarios para crear su propia
aplicacin comenzando desde un archivo FLA totalmente nuevo.
70
71
72
73
74
Comprobacin de la
configuracin de publicacin
A menudo necesitar guardar anuncios en versiones anteriores de Flash
Player. Muchos sitios en los que pretenda publicar aceptarn slo archivos
de Flash Player 6. Otra razn es que quiera crear un sitio Web con un
pblico muy heterogneo, por lo que necesitar recurrir a reproductores
anteriores. El ActionScript sencillo que aadi al archivo se puede
reproducir en Flash Player 6. Por lo tanto, puede cambiar la configuracin
del reproductor por la de Flash Player 6 en su sitio Web.
En secciones previas de este tutorial, hemos realizado cambios en el cuadro
de dilogo Propiedades del documento. Hemos definido las dimensiones y
la velocidad de fotogramas (fps) del archivo SWF. En esta ltima seccin,
verificar que la configuracin de Flash Player que desea obtener es la
correcta y que ha exportado los archivos que necesita. Muchos
desarrolladores de Flash realizan esta configuracin al iniciar el archivo
FLA, ya que son conscientes de lo que necesitan obtener y ofrecer.
1.
2.
3.
4.
5.
75
6.
7.
8.
9.
Cuando haya terminado, haga clic en Aceptar para aplicar los cambios
al documento.
archivo FLA.
Con esta accin, se publica el archivo SWF en el directorio en el que lo
guard.
11.
12. Desplace
76
Encontrar una versin finalizada del sitio Web en la carpeta finished del
directorio FlashBanner/Part3.
77
1.
2.
3.
4.
5.
78
6.
7.
8.
9.
12. En
79
2.
4.
80
Para ver los cambios del archivo SWF en Dreamweaver, puede ver el sitio
en un navegador o seleccionar el archivo SWF en la vista Diseo y hacer
clic en Reproducir en el inspector de propiedades.
2.
3.
4.
5.
NOTA
81
6.
8.
N OTA
82
Comprobacin de la aplicacin
Hemos conseguido crear un anuncio para Internet de Flash con grficos y
animacin, y tambin hemos logrado que reaccione ante la pulsacin de un
botn. Ha finalizado su primer documento de Flash animado e interactivo
y lo ha insertado en un sitio Web utilizando Dreamweaver. Veamos ahora el
anuncio en accin en una ventana de navegador.
1.
2.
N OTA
Resumen
Ya ha finalizado el primer sitio Flash y los ha insertado en una pgina Web
de Dreamweaver. Ha aprendido a crear un nuevo archivo, importar el
contenido, crear nuevos activos en Flash, aadir animaciones y
ActionScript sencillo y a publicar el trabajo en la Web. Tambin ha
aprendido a utilizar Dreamweaver para insertar el archivo SWF en una
pgina Web existente, probablemente en una parecida a cualquiera de las
que haya creado anteriormente.
En la tercera parte de este tutorial ha aprendido a utilizar el espacio de
trabajo de Flash y Dreamweaver para lograr realizar las siguientes tareas:
Resumen
83
Este paso introductorio para aprender Flash y aadir archivos SWF a una
pgina Web es importante cuando uno empieza a utilizar Flash. Ahora ya
tiene los conceptos bsicos y ha entendido la filosofa y el flujo de trabajo
necesarios para crear contenido con Flash. Con el tiempo, tendr ms
conocimientos y sabr crear contenido mucho ms interactivo, divertido,
funcional e instructivo con Flash.
84
CAPTULO 5
85
2.
NOT A
86
Sin seleccionar nada en el escenario, elija Ventana > Otros paneles >
Accesibilidad.
2.
permite a Flash
Player pasar la informacin de accesibilidad anidada dentro de un clip
de pelcula a un lector de pantalla. Si esta opcin est seleccionada para
todo el documento, podr an ocultar los objetos secundarios de clips
de pelcula especficos.
Etiquetado automtico
87
2.
3.
88
2.
Especificacin de que los lectores de pantalla omitan los elementos del documento
89
2.
3.
NOT A
90
91
2.
logo_mc
dealers_btn
orders_btn
research_btn
92
overview_btn
powerplant_btn
news_btn
safety_mc
text8_txt
10
text9_txt
11
12
NO TA
2.
3.
93
Resumen
Enhorabuena! Ha aprendido a crear contenido accesible de Flash. En unos
minutos ha aprendido a realizar las tareas siguientes:
Control del orden en el que los usuarios navegan con la tecla Tabulador
94
CAPTULO 6
95
NOT A
3.
4.
5.
96
2.
97
Haga clic en el icono en forma de ojo situado por encima de las capas
para que aparezca una X de color rojo en la columna del ojo.
Todo el contenido desaparece del escenario.
2.
Haga clic, una por una, en cada X de color rojo y compruebe cmo el
contenido de la capa vuelve a aparecer en el escenario.
Los controles situados a la derecha de cada nombre de capa permiten
mostrar u ocultar el contenido de una capa.
N OTA
Puede que tenga que utilizar la barra de desplazamiento para ver todas las
capas.
2.
NOTA
98
2.
3.
4.
2.
99
2.
NO TA
4.
2.
3.
Haga clic con el botn derecho del ratn (Windows) o con la tecla
Control presionada (Macintosh) en la capa de mscara de la lnea de
tiempo y elija Mscara en el men contextual.
La capa se convierte en una capa de mscara, lo cual se indica con un
icono en forma de diamante azul. La capa que se encuentra
inmediatamente por debajo queda vinculada a la capa de mscara. El
nombre de la capa de mscara aparece sangrado y su icono pasa a ser un
icono de capa de azul.
4.
5.
6.
101
2.
3.
Haga clic con el botn derecho del ratn (Windows) o con la tecla
Control presionada (Macintosh) en la capa Notas y seleccione Gua en
el men contextual.
Un icono situado junto al nombre de la capa indica que la capa es una
capa de guas.
4.
5.
6.
Resumen
Enhorabuena! Ha aprendido a trabajar con capas en Flash. En unos
minutos ha aprendido a realizar las tareas siguientes:
Resumen 103
CAPTULO 7
105
N OTA
NO TA
Copia de campos de
introduccin de texto y de texto
dinmico
Utilizar campos de introduccin de texto para crear un formulario.
1.
2.
3.
Presione la tecla Alt y haga clic en el campo de texto dinmico del precio
de los reproductores de CD; a continuacin, arrastre la copia del campo
hasta el rea de precios Shocks.
4.
2.
3.
4.
Adicin de un componente
Button y asignacin de un
nombre
Los componentes son clips de pelcula que ofrecen una forma fcil de
aadir funcionalidad avanzada al documento sin necesidad de tener
conocimientos avanzados sobre ActionScript. Utilizar el componente
Button para crear un botn Calcular que calcule los precios totales. Puesto
que el componente que utiliza se basa en ActionScript 2.0, en primer lugar
debe configurar el cuadro de dilogo Configuracin de publicacin para
garantizar que el contenido de Flash se reproduzca de la forma esperada.
1.
2.
3.
4.
5.
6.
Declaracin de variables y
valores de los precios
Para que la aplicacin multiplique la cantidad de piezas seleccionadas por el
precio de la pieza, es necesario definir una variable para cada pieza en
ActionScript. El valor de la variable es el coste de la pieza.
1.
2.
Las dos barras inclinadas (//) indican que el texto que sigue es un
comentario. La prctica ms recomendable es aadir siempre
comentarios que ofrezcan una explicacin del cdigo ActionScript.
N OTA
Especificacin de valores de
campos de introduccin de texto
Debe especificar los valores de los campos de introduccin de texto. Los
valores se utilizarn al crear el cdigo ActionScript que multiplica los
valores de cantidad y coste.
1.
2.
3.
110
2.
3.
price1_txt
.text
4.
111
Escritura de un controlador de
eventos para el componente
Para que el archivo SWF reaccione a eventos tales como hacer clic con el
botn del ratn, puede utilizar controladores de eventos: cdigo
ActionScript asociado a un objeto y un evento determinados. Utilizar un
controlador de eventos on() para el componente Button que calcula el
precio total cuando el usuario hace clic en el botn.
Para ms informacin sobre los controladores de eventos, consulte el
Gestin de eventos en Aprendizaje de ActionScript 2.0 en Flash.
1.
2.
3.
112
4.
5.
Comprobacin de la aplicacin
Va a probar la aplicacin para asegurarse de que se ejecuta de la forma
deseada.
1.
2.
3.
Haga clic en Calcular para ver el precio total de todas las piezas.
Comprobacin de la aplicacin
113
Resumen
Enhorabuena! Ha aprendido a crear una aplicacin. En unos minutos ha
aprendido a realizar las tareas siguientes:
114
CAPTULO 8
115
NOT A
116
3.
4.
5.
Haga clic en el rea de trabajo, lejos de los objetos del escenario, para que
no se seleccionen objetos.
2.
3.
4.
5.
6.
Si desea eliminar las guas, seleccione Ver > Guas > Borrar guas.
117
Haga clic en una zona vaca del rea de trabajo para anular la seleccin
del bloque de texto.
2.
3.
2.
3.
4.
5.
118
6.
7.
8.
9.
Seleccione Ver > Ajuste > Alineacin de ajuste para activar esta opcin,
si no est ya seleccionada.
2.
3.
4.
5.
119
Alineacin de un objeto
utilizando las guas de alineacin
Ahora que ha especificado las opciones de alineacin de ajuste, utilizar las
opciones especificadas para ayudarle a colocar un objeto en el escenario.
1.
2.
3.
4.
Vuelva a arrastrar la instancia del coche para que aparezcan las guas de
alineacin de ajuste. Acerque el coche al texto y muvalo hacia arriba y
hacia abajo, segn convenga, hasta que aparezca la gua de centrado.
Esta gua indica que el coche est centrado en relacin con el texto.
5.
Con la herramienta Seleccin, haga clic en el texto del escenario que dice
Introducing the World 's First Hybrid 4WD.
2.
Pulse la tecla Mays mientras hace clic en la segunda lnea del texto del
ttulo, 2004 Trio QZ, para aadirlo a la seleccin.
3.
4.
5.
6.
2.
121
3.
Desde el panel Biblioteca, arrastre el icono nav a una zona del escenario
por debajo de la franja azul y sultelo.
4.
5.
2.
3.
NOT A
NOT A
2.
3.
Utilice la tecla Flecha arriba para desplazar el texto hasta que la primera
lnea del texto del ttulo est en una lnea de cuadrilla horizontal. No
olvide dejar espacio entre el texto del ttulo y la barra de navegacin.
N OTA
Tambin puede utilizar las teclas Flecha izquierda, Flecha abajo y Flecha
derecha para desplazar objetos del escenario en la direccin de la flecha.
Resumen
Enhorabuena! Ha aprendido a utilizar las herramientas de diseo para
crear una interfaz de usuario. En unos minutos ha aprendido a realizar las
tareas siguientes:
CAPTULO 9
125
NOT A
3.
Creacin de smbolos
Cuando se crea un smbolo, se especifica uno de los comportamientos
siguientes:
Grfico
Clip de pelcula
Botn
2.
3.
4.
5.
6.
7.
Duplicacin y modificacin de
una instancia de un smbolo
Despus de crear un smbolo, puede utilizar sus instancias varias veces en el
documento. Puede modificar las siguientes propiedades de una instancia
individual sin que ello afecte a otras instancias o al smbolo original: color,
escala, rotacin, transparencia alfa, brillo, tinta, altura, anchura y
ubicacin.
Si edita el smbolo ms adelante, la instancia retiene sus propiedades
modificadas adems de adquirir las acciones de edicin del smbolo.
Ahora duplicar la instancia del coche y, a continuacin, cambiar la tinta
del duplicado.
1.
2.
3.
Modificacin de un smbolo
Puede entrar en el modo de edicin de smbolos haciendo doble clic en una
instancia de un smbolo. Los cambios que se realicen en el modo de edicin
de smbolos afectan a todas las instancias del smbolo.
1.
2.
3.
4.
Haga clic en la escena 1, sobre la lnea de tiempo, para salir del modo de
edicin de smbolos.
Las dos instancias del smbolo reflejan la transformacin.
2.
3.
Asignacin de un nombre de
instancia al clip de pelcula
Para hacer referencia a una instancia en ActionScript, y como consejo
general, asigne siempre nombres de instancia a los smbolos de botones y
de clips de pelculas. No se puede asignar un nombre de instancia a un
smbolo grfico.
2.
Haga clic con el botn derecho del ratn (Windows) o con la tecla
Control presionada (Macintosh) en el smbolo y seleccione Efectos de
lnea de tiempo > Transformar/Transicin > Transformar.
3.
4.
131
5.
Haga clic en Actualizar vista previa para obtener una vista previa del
efecto y, a continuacin, haga clic en Aceptar.
El efecto se extiende a 60 fotogramas de la lnea de tiempo del clip de
pelcula.
6.
Haga clic en la escena 1 sobre la lnea de tiempo para salir del modo de
edicin de smbolos.
7.
Resumen
Enhorabuena! Ha aprendido a trabajar con smbolos e instancias. En unos
minutos ha realizado las tareas siguientes:
CAPTULO 10
10
133
NOT A
3.
4.
5.
Haga clic en el rea de trabajo, lejos de los objetos del escenario, para que
no se seleccionen objetos.
2.
3.
Haga clic en una zona vaca del rea de trabajo para garantizar que no
hay ningn objeto seleccionado.
2.
3.
A continuacin, redefinir el rea activa, para que el rea del botn cubra el
rea agrupada.
Flecha arriba
Sobre
Flecha abajo
Zona activa
2.
3.
4.
6.
7.
8.
Alineacin de botones
Puede alinear botones respecto a los ejes horizontal y vertical mediante el
panel Alinear.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10. Cierre
el panel Alinear.
11.
2.
En la lnea de tiempo del botn 1, oculte todas las capas excepto la capa
Color. En la capa Color, seleccione el fotograma clave Sobre.
N OTA
4.
5.
6.
7.
8.
2.
3.
4.
5.
Haga clic en la escena 1, situada encima del escenario, para salir del
modo de edicin de smbolos y volver al documento principal.
6.
7.
8.
9.
Adicin de navegacin a un
botn
Utilizando los comportamientos, puede aadir rpidamente navegacin a
un botn sin tener conocimientos de ActionScript. Aadir navegacin
para que se abra una pgina Web cuando el usuario haga clic en un botn.
1.
2.
3.
4.
5.
141
2.
3.
4.
5.
Resumen
Enhorabuena! Ha aprendido a utilizar los botones. En unos minutos ha
aprendido a realizar las tareas siguientes:
Alineacin de botones.
CAPTULO 11
11
143
NOT A
3.
144 Tareas bsicas: creacin de una presentacin con pantallas (slo Flash Professional)
Visualizacin de la jerarqua de
pantallas y las lneas de tiempo
de las pantallas
Se aade contenido a las pantallas de forma muy parecida a como se aade
contenido al escenario, pero las pantallas son clips de pelcula anidados,
que dependen de una jerarqua, lneas de tiempo anidadas y
elementos heredados. Todas las pantallas se encuentran en el primer
fotograma de la lnea de tiempo raz, que est oculta, y el contenido de
todas las pantallas se carga en el primer fotograma. Para ms informacin
sobre las pantallas, consulte Trabajo con pantallas (slo para Flash
Professional) en Utilizacin de Flash.
1.
2.
N OTA
2.
146 Tareas bsicas: creacin de una presentacin con pantallas (slo Flash Professional)
2.
3.
NOT A
5.
6.
7.
N OTA
Adicin de comportamientos de
navegacin por pantallas a los
botones
Al abrir una nueva presentacin de diapositivas de Flash, el documento ya
incluye las funciones que permiten a los usuarios navegar entre las pantallas
de diapositivas con las teclas de flecha del teclado. Tambin aadir
comportamientos de navegacin a los botones, lo que ofrece a los usuarios
una opcin adicional para navegar entre diapositivas.
N OTA
2.
3.
148 Tareas bsicas: creacin de una presentacin con pantallas (slo Flash Professional)
Seleccin y desplazamiento de
diapositivas
Puede copiar, cortar, pegar y arrastrar pantallas en el panel Contorno de
pantalla para cambiar su orden en la presentacin. Seleccionar tres
pantallas, las cortar y las pegar de manera que queden anidadas como
pantallas secundarias de la diapositiva funciones.
1.
2.
Haga clic con el botn derecho del ratn (Windows) o con la tecla
Control presionada (Macintosh) en las diapositivas seleccionadas y
seleccione Cortar en el men contextual.
3.
2.
3.
150 Tareas bsicas: creacin de una presentacin con pantallas (slo Flash Professional)
Adicin de comportamientos de
transicin
Aunque la presentacin est prcticamente acabada, aadir
comportamientos de transicin para que sta resulte ms interesante. En
concreto, aadir comportamientos que hacen que el contenido se
desvanezca y salga de la ventana Documento.
1.
2.
3.
4.
5.
6.
151
7.
8.
Comprobacin de la
presentacin
La presentacin ya se ha completado y est preparada para que la pruebe.
1.
2.
Resumen
Enhorabuena! Ha aprendido a crear una presentacin de diapositivas con
pantallas. En unos minutos ha aprendido a realizar las tareas siguientes:
152 Tareas bsicas: creacin de una presentacin con pantallas (slo Flash Professional)
CAPTULO 12
Creacin de grficos:
cmo dibujar en Flash
12
153
NO TA
3.
2.
3.
Haga clic en cualquier lugar del espacio de trabajo gris junto al escenario
para mostrar las propiedades de la forma que crear. En el inspector de
propiedades (Ventana > Propiedades), verifique que el negro est
seleccionado como color de trazo, 1 pxel est seleccionado como altura
de trazo y Slido est seleccionado como estilo de trazo.
El trazo es la lnea que rodea la forma.
4.
2.
Rotacin de la forma
Despus de crear una forma, puede utilizar el panel Transformar para
especificar el nmero concreto de grados que se debe girar la forma.
1.
2.
Utilizacin de la funcin de
silueta
Cuando se crea una forma encima de otra en la misma capa y ambas formas
no estn agrupadas, la forma de encima recorta el rea de la forma de
debajo. Crear un crculo dentro del hexgono y, a continuacin, recortar
el crculo.
1.
2.
N OTA
3.
2.
Copia de trazos
Puede seleccionar y copiar trazos, acciones que realizar ahora para crear el
borde inferior de la tuerca.
1.
2.
Presione Mays y haga clic en las tres lneas de la forma del escenario que
conforman la parte inferior del hexgono para seleccionarlas, como se
muestra en la ilustracin siguiente:
3.
2.
Agrupacin de la forma
Puede manipular el trazo y rellenar una forma como entidades
independientes, como lo ha hecho antes, o puede agrupar el trazo con el
relleno para manipular la forma como un solo grfico, cosa que har a
continuacin.
1.
2.
2.
3.
4.
5.
161
Resumen
Enhorabuena! Ha aprendido a utilizar algunas de las diversas herramientas
de dibujo de Flash. En unos minutos ha aprendido a realizar las tareas
siguientes:
Creacin de un polgono.
Transformacin de ilustraciones.
Copia de trazos.
CAPTULO 13
13
163
NO TA
3.
4.
5.
2.
3.
4.
5.
6.
7.
8.
9.
2.
3.
4.
5.
6.
7.
8.
2.
3.
4.
5.
6.
Guarde el archivo.
NO TA
Haga clic con el botn derecho del ratn (Windows) o con la tecla
Control presionada (Macintosh) en el fotograma 1 de la capa
AnimNeumtico y seleccione Copiar fotogramas en el men contextual.
8.
9.
Cambio de la velocidad de la
animacin
Es posible que al probar la animacin haya percibido que el neumtico
rebota bastante despacio. Puede cambiar la velocidad de una animacin
cambiando el nmero de fotogramas que se reproducen por segundo y
estableciendo valores de suavizado positivos y negativos, que determinan la
velocidad de aceleracin y desaceleracin.
2.
Cambio de la aceleracin y la
desaceleracin
De forma predeterminada, los fotogramas interpolados se reproducen a
una velocidad constante. Con el suavizado, puede crear una velocidad de
aceleracin y desaceleracin ms real. Con valores positivos, la
interpolacin empieza de forma rpida y se desacelera hacia el final de la
animacin. Con valores negativos, la interpolacin empieza de forma lenta
y se acelera hacia el final de la animacin. Ahora aadir valores de
suavizado positivos y negativos a la animacin.
1.
2.
3.
4.
2.
Resumen
Enhorabuena! Ha aprendido a animar objetos en Flash. En unos minutos
ha aprendido a realizar las tareas siguientes:
Resumen
171
CAPTULO 14
14
173
174 Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional)
Copie la carpeta Animation Easing en otra ubicacin del disco duro para la
que tenga acceso de escritura. En la carpeta Animation Easing encontrar
un archivo de Flash llamado tween_finished.fla. Haga doble clic en el
archivo para abrirlo con Flash. Aparecer el archivo de tutorial finalizado
en el entorno de edicin de Flash.
176 Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional)
Cierre de la aplicacin
Para cerrar el documento, seleccione Archivo > Cerrar.
Si prefiere mantener el archivo finalizado abierto como referencia mientras
trabaja con el archivo inicial, cercirese de no editar ni guardar los cambios
realizados.
Seleccione Insertar > Lnea de tiempo > Fotograma. Deben aparecer los
fotogramas aadidos a las cuatro capas de la lnea de tiempo.
2.
178 Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional)
3.
5.
N OTA
8.
180 Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional)
2.
2.
3.
4.
5.
181
2.
182 Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional)
3.
Arrastre la lnea a la parte superior del grfico (la lnea 100%), pero
mantngala en el Fotograma 20 del eje horizontal. Ahora la lnea es una
curva compleja.
5.
184 Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional)
7.
Arrastre los selectores de vrtice para que la lnea que los conecta con el
punto de control sea horizontal y cada selector se encuentre a la misma
distancia del punto de control.
9.
10. Haga
11.
Arrastre los selectores de vrtice para que la lnea que los conecta con el
punto de control sea horizontal y cada selector se encuentre a la misma
distancia del punto de control.
13.
186 Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional)
2.
3.
4.
5.
6.
7.
Configuracin del valor alfa del clip de pelcula de la sombra del escenario
en 25%
8.
9.
10. En
11.
12. En la lnea de tiempo, haga clic en la capa Shadow para seleccionar todos
14. Haga
15. En
16.
17.
18.
188 Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional)
Comprobacin de la aplicacin
En cualquier momento durante la edicin, puede comprobar cmo se
reproduce la aplicacin como un archivo SWF. Puesto que este tutorial no
contiene animacin ni interactividad, el archivo tendr el mismo aspecto
en el modo de prueba que en el modo de edicin.
1.
2.
3.
190 Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional)
CAPTULO 15
15
191
Copie la carpeta Gradients en otra ubicacin del disco duro para la que
tenga acceso de escritura. En la carpeta Gradients encontrar un archivo de
Flash llamado gradients_finished.fla. Haga doble clic en el archivo para
abrirlo con Flash. Aparecer el archivo de tutorial finalizado en el entorno
de edicin de Flash.
2.
3.
Aplicacin de un degradado
lineal
En esta seccin aadir un degradado lineal al fondo.
1.
2.
3.
4.
5.
7.
8.
2.
3.
5.
6.
7.
8.
9.
crculo.
Arrastre del control Punto focal hacia la parte superior de la forma del
crculo
11.
12. Seleccione la
13.
14. Haga doble clic en el rea del escenario para anular la seleccin del grupo
de la bola ocho.
15. Seleccione Archivo
2.
3.
4.
5.
6.
7.
8.
9.
10. Seleccione la
11.
sombra.
15. Seleccione Archivo
2.
3.
4.
5.
6.
7.
8.
9.
10. Arrastre
11.
12. Ajuste
14. Arrastre
16.
Haga doble clic dos veces en el escenario para salir del grupo del crculo
blanco y del grupo de la bola ocho.
17.
2.
3.
4.
5.
6.
7.
8.
9.
10. Seleccione el
11.
13.
14. Arrastre
Arrastre del control Escala de degradado hacia abajo para tocar la forma
del resalte
15. Seleccione la
16.
Haga doble clic dos veces fuera del escenario para anular la seleccin del
grupo del resalte.
La ilustracin de Flash finalizada tiene el siguiente aspecto:
17.
Comprobacin de la aplicacin
En cualquier momento durante la edicin, puede comprobar cmo se
reproduce la aplicacin como un archivo SWF. Puesto que este tutorial no
contiene animacin ni interactividad, el archivo tendr el mismo aspecto
en el modo de prueba que en el modo de edicin.
1.
2.
3.
CAPTULO 16vv
16
207
Revisin de la tarea
En este tutorial, aadir algunos grficos al escenario y les aplicar filtros
para crear una imagen de aspecto realista de una tabla de billar con una
acusada profundidad de campo. Las bolas del fondo y las que aparecen en
primer plano tendrn un efecto desenfocado, tal como se vera a travs de
una cmara.
208 Creacin de grficos: aplicacin de filtros grficos y mezclas (slo en Flash Professional)
2.
3.
N OTA
2.
3.
4.
5.
6.
Haga doble clic fuera del escenario para salir del modo de edicin de
smbolos.
La instancia 9ball debera seguir seleccionada en el escenario.
7.
8.
9.
10. De este modo lograr que la instancia 9ball se muestre ms grande que
Aplicacin de un filtro
El siguiente paso es aplicar un filtro de desenfoque al clip de pelcula 9ball
para que parezca desenfocado, ya que se encuentra en el fondo del
escenario.
1.
2.
3.
4.
210 Creacin de grficos: aplicacin de filtros grficos y mezclas (slo en Flash Professional)
5.
6.
2.
3.
4.
5.
6.
7.
211
8.
9.
212 Creacin de grficos: aplicacin de filtros grficos y mezclas (slo en Flash Professional)
CAPTULO 17
17
213
N OTA
3.
4.
5.
Haga clic en un rea vaca del espacio de trabajo para asegurarse de que
no est seleccionado ningn fotograma de la lnea de tiempo ni ningn
objeto del escenario.
2.
3.
4.
5.
6.
N OTA
2.
3.
4.
5.
Dentro del bloque de texto que ha creado, escriba Want to learn more?
N OTA
2.
3.
4.
2.
Adicin de un campo de
introduccin de texto
Puede utilizar un campo de introduccin de texto para que los usuarios
puedan interactuar con la aplicacin Flash. Por ejemplo, los campos de
introduccin de texto ofrecen un mtodo sencillo para crear formularios.
En una leccin posterior (seleccione Ayuda > Tutoriales de Flash >
ActionScript: Creacin de un formulario de lgica condicional y envo de
datos), aprender a utilizar un campo de texto de entrada para enviar datos
de Flash al servidor. Ahora aadir un campo de texto en el que los usuarios
introducirn su nombre.
1.
2.
3.
4.
5.
6.
2.
Asignacin de nombres de
instancia a campos de texto
Un campo de introduccin de texto del escenario es una instancia del
objeto TextField de ActionScript, al cual puede aplicar propiedades y
mtodos. Es aconsejable asignar un nombre a las instancias de campo de
texto para otros colaboradores del proyecto puedan hacer referencia a la
instancia en ActionScript.
1.
2.
3.
2.
3.
4.
5.
Especificacin de opciones de
formato
El cuadro de dilogo Opciones de formato permite especificar la
configuracin de mrgenes y sangra del texto.
1.
2.
Visualizacin de cdigo
ActionScript del campo de texto
dinmico
Puede ver el cdigo ActionScript que carga el texto del archivo de texto
externo en el campo de texto dinmico. Este script utiliza acciones
LoadVars para cargar el contenido de safetyfeatures.txt en el campo de
texto newFeatures.
1.
2.
function onText(success:Boolean) {
if (success) {
newFeatures_txt.text = features_lv.safetyfeatures;
} else {
newFeatures_txt.text = "unable to load text file.";
}
}
3.
2.
3.
Revisin ortogrfica
Flash Basic 8 y Flash Professional 8 introducen nuevas funciones que
permiten revisar la ortografa en la mayor parte de las ubicaciones del
documento en las que aparece texto, incluidos los campos de texto, los
nombres de capa y las cadenas de ActionScript. Para revisar la ortografa,
configure primero las opciones de Configuracin de ortografa y, a
continuacin, ejecute el corrector ortogrfico.
1.
2.
3.
N OTA
Resumen
Enhorabuena! Ha aprendido los mtodos bsicos para aadir texto al
documento. En unos minutos ha aprendido a realizar las tareas siguientes:
CAPTULO 18
18
225
Copie la carpeta Script Assist en otra ubicacin del disco duro a la que
tenga acceso. En la carpeta Script Assist encontrar un archivo Flash
llamado scriptassist_complete.fla. Haga doble clic en el archivo para abrirlo
en Flash. Aparecer el archivo de tutorial finalizado en el entorno de
edicin de Flash.
El clip de pelcula Title, que muestra los ttulos de las secciones del sitio
cuando el usuario hace clic en los enlaces de navegacin
correspondientes (Home (Inicio), About (Acerca de), Products
(Productos), Contact (Contacto)).
Los clips de pelcula Menu y Menu tween, que muestran los enlaces de
navegacin principales (botones) y que, juntos, crean una animacin
cuando se ejecuta la aplicacin.
2.
3.
2.
3.
4.
Tal vez note que, cuando el modo de asistente de script est activado, no
es posible editar cdigo directamente en el editor de ActionScript, ya que
ste es de slo lectura. Toda la interaccin con el cdigo del editor se lleva
a cabo a travs del modo de asistente de script con una excepcin
importante: puede resaltar las funciones en el editor de ActionScript y
eliminarlas.
5.
Al hacer clic en el botn Aadir, aparecer una lista con todas las funciones
predefinidas de ActionScript.
230 ActionScript: utilizacin del modo de asistente de script
6.
N OTA
7.
9.
10. En
2.
Adicin de scripts de fotogramas a la lnea de tiempo mediante el modo de asistente de script 233
3.
5.
7.
Adicin de scripts de fotogramas a la lnea de tiempo mediante el modo de asistente de script 235
2.
3.
4.
Adicin de un script de
fotograma al clip de pelcula Title
El ltimo paso es aadir un script al ltimo fotograma del clip de pelcula
Title. Este script se utilizar para mostrar el texto Home en el clip de
pelcula Title una vez finalizada su animacin.
1.
3.
4.
5.
7.
8.
9.
10. En
11.
12. Guarde
el trabajo.
Comprobacin de la aplicacin
En cualquier momento durante la edicin, puede comprobar cmo se
reproduce la aplicacin como un archivo SWF. Ahora que ya sabe aadir
scripts a la aplicacin desde el modo de asistente de script, puede
comprobar la interactividad que ha aadido.
1.
2.
3.
4.
Resumen
Le felicitamos por haber empezado a utilizar el modo de asistente de script
para aadir scripts a objetos y a la lnea de tiempo. En unos minutos ha
aprendido a realizar las tareas siguientes con el modo de asistente de script:
Resumen 239
CAPTULO 19
ActionScript: creacin
de scripts
19
241
N OTA
3.
2.
Para colocar el clip de pelcula con precisin, seleccione Ver > Ajuste.
Seleccione Alineacin de ajuste y Ajustar a objetos si los comandos no
estn seleccionados.
3.
4.
NOT A
5.
NOT A
Asignacin de nombres a
instancias de botn
Con el sufijo apropiado para indicar sugerencias para el cdigo,
proporcionar nombres de instancia a dos instancias de botn que ya estn
en el escenario.
1.
2.
3.
4.
5.
2.
En la parte superior del panel Acciones, haga clic en Insertar una ruta de
destino.
3.
4.
5.
Aplicacin de la sintaxis de
ActionScript
Todos los lenguajes, con independencia de si son lenguajes informticos o
lenguajes humanos hablados y escritos, siguen reglas especficas que
fomentan la comunicacin. Estas reglas se conocen como la sintaxis del
lenguaje.
Flash utiliza la sintaxis de puntos, que significa que el punto (.) sirve para
vincular partes de un script. Otros elementos de la sintaxis de ActionScript
son:
Localizacin de la
documentacin de referencia de
ActionScript
Durante la edicin, si desea obtener informacin adicional sobre el
elemento de ActionScript que ha especificado, seleccione la accin en el
panel de herramientas Acciones o en el panel Script y haga clic en
Referencia. El panel Ayuda muestra informacin sobre la accin
seleccionada.
1.
En el panel Script del panel Acciones, haga doble clic en visible para
seleccionar el trmino.
NO TA
Adicin de comentarios a
ActionScript
En ActionScript, el texto precedido de dos barras (//) corresponde a
comentarios, que Macromedia Flash Player omite. El comentario suele
documentar las funciones del script para que otros desarrolladores puedan
comprenderlo, pero los comentarios tambin se pueden utilizar para
desactivar secciones del script al depurar. La prctica ms aconsejable es
aadir siempre comentarios que expliquen los scripts.
2.
3.
4.
6.
2.
3.
4.
5.
Comprobacin de la sintaxis y la
aplicacin
Tal como se ha explicado anteriormente en esta leccin, ActionScript
depende de que la sintaxis sea correcta para ejecutarse adecuadamente.
Flash ofrece diversas formas de revisar la sintaxis.
1.
3.
Resumen
Enhorabuena! Ha aprendido los conceptos bsicos para escribir scripts con
ActionScript. En muy poco tiempo, ha aprendido a llevar a cabo las tareas
siguientes:
Inicializacin de un documento.
Resumen 251
CAPTULO 20
ActionScript: adicin de
interactividad
20
3.
4.
5.
Haga clic en el rea de trabajo, lejos de los objetos del escenario, para que
no se seleccionen objetos.
Asignacin de nombres a
instancias de botn
Proporcionar nombres de instancia a los botones del escenario para poder
hacer referencia a los nombres de instancia en ActionScript.
1.
2.
3.
2.
3.
4.
5.
Para abrir el panel Escena, seleccione Ventana > Otros paneles > Escena.
2.
Seleccione la escena 1.
2.
2.
Reproduccin de un clip de
pelcula
Puede configurar el documento para reproducir un clip de pelcula en
tiempo de ejecucin. Con el mtodo attachMovie() puede adjuntar una
instancia de un clip de pelcula en el panel Biblioteca al escenario, aunque
no haya colocado una instancia en el escenario.
Con el mtodo attachMovie(), debe exportar el smbolo de ActionScript
y asignarle un identificador de vinculacin exclusivo, que es distinto del
nombre de la instancia.
1.
2.
3.
4.
2.
2.
Utilizacin de un
comportamiento para reproducir
un archivo MP3
Para aadir interactividad al documento con ActionScript, a menudo
puede servirse de comportamientos para que aadan ActionScript.
Utilizar un comportamiento de sonido para reproducir un archivo MP3
de la biblioteca.
1.
2.
3.
4.
5.
6.
2.
3.
4.
5.
Resumen
Enhorabuena! Ha aprendido a crear un documento interactivo. En unos
minutos ha aprendido a realizar las tareas siguientes:
CAPTULO 21
ActionScript: creacin de un
formulario con lgica condicional y
envo de datos
21
263
NOT A
3.
4.
Adicin de un campo de
introduccin de texto para
recopilar datos de formulario
Empezar insertando un campo de texto en el documento en el que las
personas que visualicen el documento puedan introducir datos. Tambin
asignar un nombre al campo de texto para que, ms tarde, pueda hacer
referencia a ste cuando utilice ActionScript en la aplicacin Flash.
1.
Haga clic en el rea de trabajo, lejos de los objetos del escenario, para que
no se seleccionen objetos.
2.
3.
4.
5.
6.
7.
2.
3.
2.
3.
4.
5.
6.
Adicin de un mensaje de
confirmacin
A continuacin, aadir un mensaje que se mostrar cuando el usuario
enve una entrada del campo de texto.
1.
2.
3.
2.
3.
4.
Adicin de etiquetas de
fotogramas para navegacin
Cuando el usuario presione el botn Enviar, Flash deber mostrar el
mensaje de error o el mensaje de confirmacin, en funcin de los datos que
se introduzcan en el campo de texto. Si se etiquetan los fotogramas, resulta
ms sencillo hacer referencia a ellos en ActionScript. Ello le resultar de
utilidad para enviar la cabeza lectora a un fotograma especfico.
A continuacin, aadir etiquetas de fotograma que le ayudarn a navegar
por la aplicacin Flash.
1.
2.
3.
2.
4.
5.
6.
7.
8.
9.
10. Site el punto de insercin detrs de las llaves y escriba else{ en el panel
Script.
Presione Intro o Retorno.
11.
2.
3.
2.
4.
2.
3.
Resumen
Enhorabuena! Ha aprendido a escribir un script con lgica condicional y
envo de datos. En unos minutos ha aprendido a realizar las tareas
siguientes:
Resumen 273
CAPTULO 22
ActionScript: trabajo
con objetos y clases
22
275
2.
2.
3.
4.
5.
6.
7.
8.
2.
3.
4.
5.
6.
N OTA
Para definir correctamente una clase en ActionScript 2.0, todas las clases
deben especificarse dentro de la palabra clave class y todas las variables del
constructor deben declararse fuera de ste.
NO TA
Para crear objetos a partir de esta clase, ahora puede utilizar el cdigo
siguiente:
N OTA
2.
3.
4.
Product
id:Number;
prodName:String;
description:String
5.
Defina los mtodos getter y setter para cada propiedad de la clase, como
en el ejemplo siguiente.
Especifique Void como tipo de retorno de los mtodos setter e indique
el tipo de datos devuelto para los mtodos getter.
class Product
{
var id:Number;
var prodName:String;
var description:String
function Product (id:Number, prodName:String,
description:String) {
setID(id);
setProdName(prodName);
setDescription(description);
}
public function setID (id:Number) :Void
{
this.id = id;
}
public function setProdName (prodName:String) :Void
{
this.prodName = prodName;
}
public function setDescription (description:String)
:Void
{
this.description = description;
}
public function getID () :Number {
return id;
}
public function getProdName () :String {
return prodName
}
public function getDescription () :String {
return description;
}
}
6.
Guarde el archivo.
NOTA
2.
3.
En el panel Acciones, cree dos objetos a partir de la clase Product con los
datos que se muestran en la tabla siguiente (el cdigo ActionScript que
crear aparece despus de la tabla).
Nombre de la Datos
instancia
pedals
handleBars
4.
id
prodName
Clipless Pedals
description
id
prodName
ATB
description
5.
6.
NOT A
La clase Drag hereda ahora todas las propiedades y los mtodos de la clase
MovieClip existente y puede utilizar las propiedades y mtodos de
MovieClip en cualquier lugar dentro de la definicin de clase, como en el
ejemplo siguiente:
N OTA
N OTA
2.
3.
4.
5.
6.
N OTA
8.
9.
10. Guarde
11.
el archivo de ActionScript.
N OTA
Resumen
Enhorabuena! Ha aprendido a trabajar con objetos y clases en
ActionScript 2.0. En unos minutos ha aprendido a realizar las tareas
siguientes:
CAPTULO 23
23
NO TA
Estos tutoriales son modelos de trabajo que muestran cmo se utilizan los
componentes de datos (XMLConnector, WebServices Connector,
RDMBSResolver y XUpdateResolver) con la vinculacin de datos en Flash
Professional 8. No estn diseados como aplicaciones de produccin.
NOT A
CAPTULO 24
24
289
2.
Abra el panel Servicios Web (Ventana > Otros paneles > Servicios Web)
y haga clic en Definir servicios Web.
3.
4.
290 Integracin de datos: utilizacin del servicio Web Macromedia Tips (slo en Flash Professional)
5.
2.
3.
4.
292 Integracin de datos: utilizacin del servicio Web Macromedia Tips (slo en Flash Professional)
5.
Creacin de una interfaz de usuario y vinculacin de los componentes con el servicio Web 293
7.
294 Integracin de datos: utilizacin del servicio Web Macromedia Tips (slo en Flash Professional)
8.
Creacin de una interfaz de usuario y vinculacin de los componentes con el servicio Web 295
9.
10. Abra
11.
N OTA
el archivo.
296 Integracin de datos: utilizacin del servicio Web Macromedia Tips (slo en Flash Professional)
13.
14. Seleccione
sugerencia.
Creacin de una interfaz de usuario y vinculacin de los componentes con el servicio Web 297
298 Integracin de datos: utilizacin del servicio Web Macromedia Tips (slo en Flash Professional)
CAPTULO 25
25
299
NO TA
Para ver una demostracin, deber acceder a los datos XML del disco
duro y mostrar la propiedad DeltaPacket en la pantalla. En un contexto
real, XUpdate se enviara al servidor para procesarse.
2.
3.
4.
300 Integracin de datos: utilizacin de XML para una hoja Timesheet (slo en Flash Professional)
5.
NO TA
N OTA
8.
302 Integracin de datos: utilizacin de XML para una hoja Timesheet (slo en Flash Professional)
9.
12. En
13.
16.
17.
18.
19. Haga
20.En
22.Haga
304 Integracin de datos: utilizacin de XML para una hoja Timesheet (slo en Flash Professional)
23.Mediante
NO TA
24.Seleccione
N OTA
26.Haga
27. En
2.
3.
4.
5.
6.
7.
8.
9.
10. Sin
11.
12. Haga
13.
14. Deje
15. Arrastre
16.
17.
306 Integracin de datos: utilizacin de XML para una hoja Timesheet (slo en Flash Professional)
18.
19. Guarde
20.Ejecute
2.
3.
Ejecute la aplicacin.
Ahora puede editar datos en la cuadrcula.
308 Integracin de datos: utilizacin de XML para una hoja Timesheet (slo en Flash Professional)
CAPTULO 26
26
309
NO TA
Para ver una demostracin, deber acceder a los datos XML del disco
duro y mostrar la propiedad DeltaPacket en la pantalla. En un contexto
real, XUpdate se enviara al servidor para procesarse.
Actualizacin de la timesheet
Ahora establecer las vinculaciones para permitir que la timesheet se
actualice.
1.
2.
3.
4.
5.
310 Integracin de datos: utilizacin de XUpdate para actualizar la hoja Timesheet (slo en Flash Professional)
6.
7.
8.
9.
NO TA
13.
14. Seleccione el
15. Haga
Actualizacin de la timesheet
311
16.
17.
18.
23.Haga
24.Intente
NOTA
S U GER EN CI A
312 Integracin de datos: utilizacin de XUpdate para actualizar la hoja Timesheet (slo en Flash Professional)