Está en la página 1de 5

Computer Básico Práctico: Crea una tarjeta de felicitación con Flash

Conceptos
Línea de tiempo
En los programas de ani-
mación, tanto gráfica como
de vídeo, esta herramienta
se utiliza para organizar
y controlar los diferentes
elementos y acciones que
se suceden dentro del
proyecto. Dentro de un
documento el tiempo está
dividido en fotogramas en
los que se inserta cada uno
de los objetos

Fotograma clave
Se trata de un fotograma
en el que se puede
definir un cambio en las
propiedades de un objeto
o animación. Asimismo, se
puede también incluir una
acción concreta mediante
código ActionScript y
controlar algún aspecto
del documento. Flash

¿Te atreves?
puede interpolar o rellenar
de forma automática los
fotogramas situados entre
dos fotogramas clave para
generar las animaciones.

ActionScript
Es el código de programa- ¿Te gustaría este año felicitar las fiestas de forma original y sin
ción que se puede utilizar Sumario mucho esfuerzo? Gracias a programas como Flash, puedes crear
para añadir elementos inte- Crea una felicitación de una tarjeta animada y enviarla por correo electrónico.
ractivos entre el documento Navidad con Flash 58
de Flash y el usuario, así
como controlar con más
Prepara el proyecto
Dibuja elementos estáticos
58
59
postal animada de forma
sencilla y fácil. 1 Prepara el proyecto
Añade clips de movimiento 59 No obstante, las posibilida-
precisión el comporta- Crea el efecto de nieve 60
miento de los mismos. Este Publicación del proyecto 61
des con las que cuentas son Antes de comenzar a con la barra de propiedades.
código puede guardarse Envía la felicitación 62 infinitas, tanto por los gráfi- trabajar con Flash es con- Para ello, sólo tienes que ha-
en el mismo documento de cos y elementos multimedia veniente que personalices cer click en cualquier zona
Flash, si bien, se pueden que selecciones, como por la interfaz del programa y de la barra .

U
almacenar por separado en n año más se aproxi- la forma de combinarlos ocultes los paneles de he-
un archivo de tipo AS. man unos días en los con los distintos métodos rramientas que no vas a uti-

2
que abundan los en- de generar el movimiento. lizar. Al abrir la aplicación,
Ruta cuentros, fiestas, regalos, Una vez que aprendes a por defecto, se muestra un Lo siguiente que tie-
La ruta de un elemento y cómo no...las tarjetas de trabajar con cada una de las menú en el margen dere- nes que definir son las
es el camino completo felicitación navideña. Si te herramientas, el resto de- cho que contiene las herra- dimensiones y el color de
que hay que seguir desde aburre escribir y enviar por pende de tu imaginación y mientas de color así como fondo del documento. Sitúa-
un determinado archivo correo las postales, puedes el tiempo que dediques. la biblioteca de elementos. te sobre el menú y
o carpeta hasta llegar a ser este año más original Después de crear la tar- Puedes mostrarlas cuando luego haz click en .
otro fichero dentro de la (a la vez que ahorrarte un jeta, puedes publicarla en las vayas a utilizar, pero Verás ahora la ventana .
estructura de directorios y dinero) y crear una tarjeta Internet y enviarla a tus mientras tanto te resultará En el campo
subdirectorios existentes animada para enviarla por familiares y amigos a través más cómodo trabajar sin
en el ordenador. correo electrónico. del correo electrónico. Pa- ellas sobre la pantalla.

1
Existen dos formas de de- Uno de los mejores progra- ra esto último, únicamente
finir la ruta de un archivo. mas que existen para este tendrás que modificar un Para ocultar el panel de
La ruta absoluta indica tipo de proyectos es Flash, pequeño parámetro en el color haz click en
la dirección del fichero de Macromedia, del que te codigo HTML de la página y
desde el nivel superior de puedes descargar una ver- alojarla en un servidor web
la estructura de archivos sión de prueba para 30 días gratuito de los muchos que
de Windows, como por desde la página oficial, www. existen en Internet. y, a continuación, pulsa en la
ejemplo, la unidad C:/. La macromedia.com. Sigue los pasos que te entrada .
ruta relativa parte desde el En este artículo te expli- explicamos a continuación Repite el mismo paso con la
directorio local donde está camos todos los pasos y y podrás felicitar las fiestas ventana de objetos situada
ubicado el archivo. herramientas que necesitas de este año con unas tarje- debajo. En el margen infe-
utilizar para obtener una tas divertidas y originales. rior puedes hacer lo mismo

58 Nº 188
Práctico: Crea una tarjeta de felicitación con Flash Computer Básico

puedes añadir un título al fondo del documento. En abre, pulsa sobre


proyecto. Justo debajo, indi- este caso, hemos escogido y, después
ca también el ancho y el alto el tono . en la entrada .
del mismo, en este caso . A continuación, pulsa sobre De esta forma los
el botón . elementos se aña-

4
dirán directamen- archivos que necesitas
Por defecto, el programa lo Ahora que ya tienes te a la biblioteca y pulsa en el botón pa-
mide en píxeles. Si prefieres configurado el docu- 01 (pág. 61) p a r a ra agregarlos al proyecto.
definir otra unidad de me- mento tienes que agregar elementos que vas a utilizar que puedas traba-
dida, hazlo desde el panel al proyecto los distintos como gráficos, imágenes o jar y localizarlos
desplegable . archivos de audio. Si- con comodidad.

3
túate sobre el menú En la ventana que
Haz click sobre el ico- con el puntero se muestra a con-
no pa- del ratón y en el cua- tinuación, selec-
ra seleccionar el color de dro de diálogo que se ciona los distintos

2 Dibuja los elementos


estáticos
3 El siguiente paso con-
siste en modificar las
propiedades de este borde.
y marca un valor de
para definir el grosor del
contorno del rectángulo.
Para seleccionar el rectán- Después selecciona
La pantalla principal del para no aplicar ningún color gulo, dirígete a como estilo de línea. Tras
programa presenta un área al fondo del objeto. ello, obtendrás un resultado

2
central vacía o escenario como éste .

5
02 (pág. 61) donde se colo- Para dibujar el rectán-
can los diferentes objetos gulo, haz click en uno y haz click sobre el fotogra- Haz click sobre el me-
del proyecto. En la parte de los vértices del escenario ma que se ha creado nú y después
superior está situada la línea con el ratón, y sin soltarlo, en para abrir esta
de tiempo que permite orga- arrástralo hasta el ángulo ventana. Selecciona
nizar de forma secuencial el opuesto, tal y como puedes
contenido del proyecto en ver en la imagen
capas y fotogramas. Es con- Tras ello se creará un con-
veniente que trabajes en ca- torno de color blanco de 1
pas diferentes para acceder píxel de grosor.
a los elementos con mayor
rapidez. El primer paso de
este proyecto será aplicar un
marco especial para darle un y arrastra el gráfico hasta la
toque navideño. esquina superior del marco

1
que has creado.
Para contornear todo el en la línea de tiempo. Luego
documento selecciona haz click sobre la he-
la herramienta rramienta

4
de dibujo con
un click sobre Después, pulsa sobre la
el botón barra de

6
Luego, en el pa- situada en la parte inferior quieras añadir el texto. Edi-
nel , pulsa en Por último, escribe ta el tamaño, color y tipo
para definir el color de con- el texto de la feli- de fuente del mismo modo
torno y selecciona el blan- citación. Pulsa en que en un editor de texto
co. Después, haz para abrir este panel. En el y después en la normal con las herramien-
click en cuadro que se despliega, haz parte del docu- tas situadas en la ventana .
y activa el botón click sobre la pestaña mento donde Obtendrás el resultado .

3 Añade clips
de movimiento
1 El primer clip de película
que se añadirá al proyec-
para nombrarla. Llámala, por
ejemplo, .
soltar el botón del ratón,
arrástrala hacia la escena .

2
to consiste en una ilustración
que ocupará al principio to- Ahora hay que colocar
EL método para animar los clave y otro puede ser pro- do el área del documento. el fondo sobre el esce-
distintos objetos con Flash gresivo. Cuanto mayor sea Poco a poco su tamaño que- nario. Haz click sobre el me-
consiste en utilizar clips de el número de fotogramas dará reducido y se colocará nú y después pulsa
película 03 (pág. 61). Dentro intermedios, el cambio será en una de las esquinas. En en para abrir esta
de la línea de tiempo se más lento. primer lugar, en la línea de ventana. Selecciona la ima-
insertan fotogramas clave En este ejemplo explica- tiempo pul- gen que vas a utilizar como
donde se pueden modifi- mos cómo conseguir que sa sobre fondo, en este caso
car algunos parámetros del aparezca una escena casi sin para añadir una nueva capa. con un click sobre ella y sin
símbolo 04 (pág. 61) como el color en un punto y se co- Después haz doble click en
tamaño, posición o color. El loque poco a poco en otro

cambio entre un fotograma totalmente visible.

Nº 188 59
Computer Básico Práctico: Crea una tarjeta de felicitación con Flash

3 Si el tamaño del obje-


to es mayor que el del
documento sobre el que tra-
7 Para crear el movimien-
to, sitúate sobre el fo-
tograma número 19 con un
Consejo
Cuando trabajes con muchas
bajas, tendrás que ajustarlo. click sobre él y después, en capas, como medida de se-
Haz click sobre la imagen la pestaña , selec- guridad, es aconsejable que
que acabas de insertar para ciona en el cuadro desplega- bloquees aquellas sobre las
seleccionarla y pulsa ble . Tal que no vas a trabajar con un
sobre el botón . y como puedes comprobar, click en la herramienta
Aparecerán unos “tirado- la línea de tiempo cambia
res” sobre su contorno. Pin- de forma .
cha en uno de los vértices situada a lado de ellas. De
y presiona a la vez la tecla este modo, evitarás modi-

8
para hacer el ajuste de ficar por error alguno de los
forma proporcionada.A con- Después, vuelve al foto- elementos incluidos en las
tinuación, arrastra el vértice grama 1 y, en la pesta- mismas.
hacia abajo hasta conseguir ña de , selecciona
el tamaño deseado . y aplica un Haz click en . De es-

4
valor de . De esta ta forma, al llegar a este fo-
Para poder aplicar un forma el color del gráfico al tograma, la película quedará
efecto de movimiento comienzo del clip será casi parada (en caso contrario,
sobre la imagen, hay que transparente. volvería al primer fotograma

5 6 9
convertirla en un símbolo. y haría un bucle).
En este caso, en un clip de Es el momento de aña- Ahora dirígete al panel A continuación, haz Por último, pincha en cual-
película. Haz click sobre la dir el movimiento. Haz situado en la parte click sobre el último quier parte de la barra
imagen de nuevo y pulsa doble click sobre la imagen fotograma y pulsa con el
el botón derecho del ratón. para editarla. Con un click inferior de la pantalla del
En el cuadro de diálogo que sobre , programa. Escribe los si-
aparece, selecciona la entra- sitúate en es- guientes valores para indicar
da . Ahora te fotograma el tamaño y la posición de la
verás la ventana . en la línea de imagen en el fotograma que
Introduce un nombre pa- tiempo y pulsa la tecla has creado. En este caso,
ra el nuevo elemento en para añadir un fotograma
, marca la clave. Quedará marcado con botón derecho del ratón. En para minimizar la ventana y
casilla un círculo, tal y como pue- el cuadro de diálogo que se pulsa en y volver así
des ver en la imagen, . muestra, selecciona la en- a la escena principal.
trada . Se abrirá la
ventana de acciones .
y pulsa por último sobre el Pincha en y
botón . después en .

4 Crea el efecto de nieve mer fotograma de la nueva


capa para colocarte sobre
te inferior de la pantalla y
en el panel desplegable se-
él. A continuación, abre la lecciona .
Otra de las herramientas tana ventana . Pue-
con las que puedes animar que se muestra escribe un des hacerlo de forma rápida
objetos en Flash son las nombre si pulsas las teclas y a
guías de movimiento. Con- y activa con un click. la vez. Selecciona el archivo
siste en dibujar un trazo Pulsa en . y arrástralo a la ventana del En el campo situado abajo,

2
sobre la escena de forma proyecto. escribe un nombre para

4
que el objeto se desplace Selecciona la herra- identificar el nuevo símbo-
después sobre él.Tiene múl- mienta de dibujo con Es posible que el ob- lo. A continuación, haz do-
tiples aplicaciones. En este un click sobre . jeto se haya quedado Sitúa el ratón sobre uno de ble click sobre el
caso lo hemos utilizado pa- En la pestaña grande en proporción con los vértices hasta que el icono
ra crear el efecto de la nieve , selec- el dibujo de fondo que ha- puntero cambie sobre el escena-
cayendo al suelo. ciona el color blanco con bías colocado en el paso an- de forma . rio para abrir el editor de

1
la herramienta del bote de terior. En ese caso, puedes Haz click y símbolos. Tras ello, pincha
Como en el paso an- pintura . reducirlo. Para ello haz click arrastra el vérti- sobre él y pulsa las teclas
terior, añade una capa Sitúate sobre el sobre él y se mostrarán los ce hacia abajo y reduce su y para agrupar el ele-
nueva para insertar en ella escenario y dibuja un cír- manejadores para ajustar su tamaño hasta que sea pro- mento.

6
el efecto de nieve y asígnale culo irregular dimensión . porcional al de un copo de
un nombre, por ejemplo . como el que nieve. Sitúate sobre la capa

5
puedes ver en y después haz click con
la imagen . Para poder animar este el botón secundario del

3
elemento, necesitarás,
A continuación, haz igual que en el paso ante- ratón. En el cuadro de diálo-
click en rior, convertir el gráfico go que aparece a continua-
A continuación, ve al menú en un clip de película. Por ción, pulsa sobre la entrada
y selecciona la entra- para volver al escenario prin- tanto, dirígete a la ventana . Tras
da .En la ven- cipal. Pulsa luego en el pri- situada en la par- ello, se creará una nueva

60 Nº 188
Práctico: Crea una tarjeta de felicitación con Flash Computer Básico

capa, con función de guía, ma 20 y pulsa la tecla pa- ¿Qué es...?


sobre la línea de tiempo. ra fijar la duración del clip
hasta este punto . 01 Biblioteca

9 14
Se trata del lugar en el
A continuación, vuelve punto. Comprueba el resul- Sitúate ya sobre que se almacenan y or-
a la capa inferior donde tado. Para ello y a conti- ganizan todos los ele-

7
tienes insertado el símbolo pulsa en nuación en el fotograma 20, mentos y símbolos crea-
Para dibujar la guía so- con el copo de nieve. Sitúa- y sin soltar el por ejemplo. Pulsa la tecla dos en Flash así como
bre la que se moverá el te en el primer fotograma ratón, mueve la barra hacia para alargar hasta aquí la los archivos importados
copo de nieve, pincha en el de la línea de tiempo con la izquierda y hacia la dere- duración del clip . como gráficos, audio,
primer fotograma de la nue- un click sobre él. Pulsa de cha. Si has seguido los pa- imágenes o clips de ví-
va capa. Después, haz click nuevo sobre el fotograma sos correctamente, el objeto deo. Además, es posible
encima de la herra- 20 de esta capa y presiona realizará el mismo recorrido organizarlos en carpetas
mienta de dibujo la tecla para insertar un que la línea. Tras ello, pulsa independienes para loca-

12
lápiz . fotograma clave. en el icono lizarlos más rápido y tra-
Ahora dirígete al panel de Con estos pasos ha- para crear una bajar con facilidad.
opciones situado en la par- brás conseguido el capa nueva. Colócate en un
te inferior de efecto de un copo de nieve fotograma que no sea el pri- 02 Escenario

10
esta misma cayendo. mero y pulsa la tecla . En Flash se conoce con

15
barra Vuelve al primer fo- Sin embargo, para que este nombre al área
y haz click so- tograma y seleccio- sea más real tendrás que A b re l a ve n t a n a rectangular donde se
bre la herramienta na el objeto con el dibujo duplicarlo las veces necesa- y selec- insertan los diferentes
con forma . del copo de nieve.Arrástralo rias en distintos puntos de ciona el clip de movimien- elementos del proyecto
Selecciona el modo hasta el extremo superior la escena. Para ello, vuelve to que contiene el copo de como gráficos vectoria-
de la línea que al escenario principal con nieve animado . les, cuadros de texto,
has creado . un click sobre . botones, clips de vídeo

13
Notarás que se o imágenes, entre otros,
pega a ella como Ahora tienes que Después arrástralo al nuevo que se utilizan para
si se tratase de un imán. Des- crear un nuevo clip fotograma que has creado y crear los distintos docu-
pués, haz click sobre el foto- de película donde incluyas ajusta su tamaño. Para que mentos.
para que el movimiento sea grama 20 y repite el mismo varios símbolos como el que parezca más real, es reco-
más suave. En la ventana paso sólo que ahora arrastra acabas de crear y simular el mendable que lo coloques 03 Clip de película
, elige un color el dibujo hasta el extremo efecto de la nieve al caer. sobre el área donde está si- Se trata de un símbolo
fuerte para diferenciar la inferior de la guía. Selecciona el clip situado tuada la nube en el dibujo. que contiene una línea

11
guía del resto de los elemen- en la capa y, des- Repite luego la operación de tiempo independiente
tos del proyec- Por último, para ge- de el menú , pulsa el número de veces que de la del documento
to como, por nerar el movimiento, sobre . Escri- consideres necesarias hasta principal. Se pueden
ejemplo . pulsa sobre el fotograma 19 be un nombre en la ven- conseguir el efecto de nieve añadir dentro de otros

8
y en la ventana , tana y ac- que deseas. clips de película o boto-
Luego vuelve al esce- selecciona la entrada tiva con un click la casilla Al final, el aspecto de la nes y crear animaciones
nario y traza una línea . Pulsa sobre línea de tiempo quedará, más complejas.
vertical que comience en el el botón y después, aproximadamente, como se
área del cielo y termine en haz doble click sobre el sím- muestra en la imagen a con- 04 Símbolo
el suelo de la imagen . bolo para poder editarlo. tinuación . Cada uno de los elemen-
del panel desplegable de tos que constituyen la
animación. Después haz biblioteca en Flash se
click sobre el fotograma 20 denomina símbolo. Pue-
de nuevo, pulsa el botón de- den ser cualquier tipo de
recho del ratón y selecciona archivo multimedia como
la entrada . En el pa- gráficos, clips de movi-
nel , miento, botones o archi-
haz click sobre para vos de audio. Es posible
Tras ello, dirígete al fotogra- detener la película en este utilizarlos en distintas
partes del documento y

2
modificar algunas de sus
5 Publicación del proyecto .
Desde la ventana que se abre,
A continuación, pulsa
de nuevo sobre el me-
propiedades sin necesi-
dad de volver a crearlo.
haz click en la pestaña nú y haz click en .
Ya sólo te queda publicar los mensajes de su carpeta 05 SWF
el proyecto para después de correo basura. Es el archivo final y com-
poder enviarlo por correo Para evitarlo, conviene que primido que se genera al
electrónico a tus conocidos. cambies la ruta del archivo publicar el documento de
En este punto, debes tener swf 05 por la URL o direc- y activa las Flash y que se inserta en
en cuenta que al enviarlo ción del mismo desde el ser- casillas . la página web. Su conte-
como archivo ejecutable vidor donde lo alojes. Luego pulsa nido no se puede editar

1
es posible que si el desti- en la pestaña , ya que esta tarea sólo se
natario tiene instalado al- Antes de guardar selecciona la entrada puede realizar desde el
gún programa antivirus o el archivo que has archivo .fla.
antispam, el correo pueda creado, pulsa en el me- y haz click sobre el botón

quedar almacenado entre nú y después en .

Nº 188 61
Computer Básico Práctico: Crea una tarjeta de felicitación con Flash

En la ventana que aparece,


elige la ubicación dentro del
equipo para guardarlo .
4 En la nueva pantalla
que se muestra, intro-
duce tu nombre de usuario
click sobre el menú

y contraseña
situado en la parte inferior
de la pantalla. Pulsa sobre el
botón

y haz click en En la
Dale un nombre al archivo, página siguiente, pulsa en y selecciona el archivo
por ejemplo, . . A continuación
Luego, selecciona haz click en y después
sobre el botón en la
parte inferior de la página.
y después en Tras ello, se mostrará el
ya que si compilas el pro- nombre del archivo en .
yecto con la última versión para crear el nuevo espacio

5
de Flash, es posible que al- web. Desde aquí puedes
gunos usuarios que aún no comprobar ahora las propie- Antes de subir el archi-
tienen el nuevo reproductor dades de tu nueva página, vo HTML es necesario
instalado, no lo puedan ver. así como la URL o dirección que modifiques la ruta del

3
de la misma . archivo swf. De esta forma,
El siguiente paso que cada vez que ac-
tienes que dar consiste cedas a la página,
en alojar la página y el archi- intentará localizar el acceso directo para subir el archivo.
vo en un espacio web. En el el archivo swf en para abrir la pá- Si tecleas en el navegador la
caso de que no tengas nin- el servidor en In- gina que se ha URL de tu página ,
guno, puedes darte de alta Para subir los archivos, pue- ternet y no será necesario generado . tienes que ver la tarjeta de
en alguno de los servidores des hacerlo con un progra- que lo envíes junto con el Después, dirígete al menú felicitación.
gratuitos disponibles en In- ma cliente FTP o bien desde documento HTML. El nom- y pulsa sobre la entrada
ternet. En este artículo he- el propio gestor de la pági- bre de la ruta dependerá . Busca la línea de Consejo
mos utilizado el alojamiento na. En el segundo caso, haz del nombre y directorio del código que contenga la ruta
que proporciona el servidor local relativa del archivo swf No todos los programas de
de www.miarroba.com. Abre que has creado correo electrónico permiten
una página del navegador y y sustitúyelo por la ruta con visualizar de forma correcta
teclea la dirección . la URL completa del espacio el archivo swf junto con la
web donde has subido el ar- página HTML. Una forma de
En la pantalla que aparece, chivo. En este caso, . evitar este tipo de proble-

6
selecciona mas, consiste en añadir en la
A continuación ,pulsa misma página del documen-
para darte de alta. Rellena sobre el menú y to HTML un enlace con la
los datos del formulario que haz click en para apli- URL donde tienes alojada la
aparece a continuación car los cambios. Luego, vuel- página.Puedes, por ejemplo
y pulsa sobre el botón ve a tu sitio web para subir el añadir la frase: “Si no ves co-
. Tras ello, recibi- archivo. Selecciónalo en rrectamente el archivo, pulsa
rás un mensaje en tu cuenta Aquí”, y crear desde esta úl-
de correo. tima palabra el enlace.
y, como antes, pulsa en
Pulsa en el enlace que apare-
ce para activar la cuenta .

sitio donde hayas alojado la


web. Haz doble click sobre

7 Envía la felicitación para generar el nuevo men-


saje que quieres enviar.
el panel desplegable situado
debajo para mostrarlos.
por correo electrónico
2 Haz click sobre el
3 En la ventana del nuevo

1
campo de texto. Lue- mensaje se adjuntará el
El último paso que tienes Abre el programa cliente go, dirígete al menú archivo de Flash con el as-
que dar consiste en enviar de correo electrónico. y pulsa sobre la entrada pecto siguiente
la postal navideña por co- Para ello, haz click sobre el . En la ven- Añade el nombre de los
rreo electrónico. menú , pulsa en tana que destinatarios desde el bo-
En este artículo hemos y des- aparece, tón . Por último, es-
utilizado el programa de pués en . selecciona cribe el asun-
correo Microsoft Outlook Tras ello, se abrirá la venta- el archivo to del mensaje
Express. Te explicamos los na principal del programa . En ca-
pasos que tienes que seguir . Pulsa luego so de que no lo encuentres, y pulsa sobre
para conseguirlo. sobre el botón marca en para enviar la felicitación.

62 Nº 188

También podría gustarte