Los símbolos son, básicamente, recursos gráficos y multimedia reutilizables y se utilizan principalmente para crear animaciones y contenido interactivo.
Un símbolo es una especie de molde a partir del cual se pueden crear muchas copias (a las que se denomina instancias de ese símbolo) con las cuales tiene un enlace permanente.
Esto enlace permite que si necesitamos modificar todas las instancias, podamos hacerlo de de una sola vez editando el símbolo.

Volver al Índice

Pero la similitud con un molde se acaba ahí porque, cuando modificamos el contenido de un símbolo, estamos modificando automáticamente todas sus instancias. Es una herramienta muy útil precisamente por eso.

Los símbolos residen en la biblioteca y no pueden salir de ahí. Cuando arrastramos un símbolo fuera de la biblioteca estamos creando, en realidad, una instancia de ese símbolo.
Una instancia es una copia de un símbolo, en cierto sentido. Hereda su contenido y su tamaño. Pero por otro lado, también es más que una simple copia, las instancias de un símbolo tienen propiedades propias, que permiten modificar cada copia independientemente de las demás. Estas propiedades son las que aparecen en el panel de propiedades cuando seleccionamos una instancia que está en el escenario, o dentro de otro símbolo.

Las instancias de un símbolo pueden ser creadas en la escena o dentro de otro símbolo. Esto último es especialmente importante, porque permite anidar instancias de un símbolo dentro de otro, y como veremos anidar animaciones, lo que permite simplificar la creación de animaciones complejas.

La utilización de símbolos en los documentos de Flash reduce dramáticamente su tamaño. Guardar varias instancias de un símbolo requiere mucho menos espacio, tanto en disco como en memoria, que guardar varias copias del mismo gráfico (si simplemente lo copiamos y pegamos). También reduce drásticamente el tamaño del archivo publicado final.

En este sentido, las instancias se pueden considerar como enlaces, punteros o referencias a un símbolo. Internamente, cada vez que flash se encuentra una instancia, sigue ese enlace hasta su símbolo en la biblioteca y entonces pinta el contenido del símbolo en la escena y le aplica las propiedades específicas de la instancia.

Como crear símbolos

Vamos a ver tres métodos diferentes para crear símbolos, que utilizaremos según más nos convenga en cada caso.

Convertir un gráfico, un texto o una imagen en símbolo


Resumen de los pasos a seguir:

  1. Crearemos una o varias formas vectoriales y/o colocaremos una foto en la escena. Seleccionaremos todo el contenido que queramos convertir en símbolo.
  2. Pulsamos F8, o desde el menú Modify -> Convert to symbol
  3. Aparecerá el cuadro de diálogo de Conversión a símbolo. Escribimos un nombre. Seleccionamos el tipo de símbolo que deseamos y escogemos donde estará el punto de registro (o centro del símbolo).
  4. Pulsamos Ok

Estos pasos crearán el símbolo en la biblioteca con los elementos gráficos que teníamos seleccionados como contenido. Estos elementos gráficos quedarán en la escena pero agrupados y convertidos en una instancia de ese símbolo.

Crear un símbolo vacío


Se puede hacer de dos formas:

Desde el menu:

  • Insert -> New Symbol (o pulsando Ctrl+F8)
  • Aparece el cuadro de diálogo de Creación de símbolo. Escribimos un nombre y seleccionamos que tipo de símbolo queremos crear.
  • Pulsamos Ok
  • Ahora podemos dibujar o añadir el contenido gráfico en el símbolo

Haciendo click con el botón derecho del ratón sobre una área vacía de la biblioteca:

  • Elegimos New Symbol en el menú que aparece.
  • Aparece el cuadro de diálogo de Creación de símbolo. Escribimos un nombre y seleccionamos que tipo de símbolo queremos crear.
  • Pulsamos Ok
  • Ahora podemos dibujar o añadir el contenido gráfico en el símbolo

En ambos casos, símbolo se creará en la biblioteca, pero no se añadirá automáticamente a la escena.

Propiedades de símbolos e instancias

Propiedades de un símbolo

Figura 1
Figura 1
Para acceder a las propiedades de un símbolo, abrimos el panel de la biblioteca (Library) y hacemos click con el botón derecho del ratón sobre el símbolo del que queremos ver las propiedades (ver Figura 1). Entonces seleccionamos la opción Properties del menú contextual, y aparecerá el cuadro de diálogo de propiedades del símbolo (ver Figura 2).

Las propiedades fundamentales del símbolo son su nombre y su tipo, los cuales podemos cambiar en este diálogo.

Figura 2
Figura 2

Es importante que los nombres de los símbolos sean descriptivos. A medida que la complejidad de nuestros proyectos crezca, tendremos más y más símbolos en la biblioteca. Si no los nombramos correctamente o, simplemente, no los nombramos, puede resultar casi imposible encontrarlos después.

Tipos de símbolo

Figura 3: Cada tipo de símbolo se representa en la biblioteca con un icono diferente.
Figura 3: Cada tipo de símbolo se representa en la biblioteca con un icono diferente.
Existen tres tipo de símbolo, que se pueden elegir en el cuadro de diálogo de la Figura 3:

  • SymbolTypes_Graphic Símbolo Gráfico (Graphics): Se utilizan para contenido estático o animado, pero no interactivo. Puede contener gráficos vectoriales, textos, y/o imágenes de mapas de bits.
  • SymbolTypes_Button Símbolo Botón (Button): Se utilizan para crear botones que contienen tres estados: Normal (Up), Encima (Over) y Presionado (Down). Permiten definir además un área activa de interacción con el ratón. Utilizando el lenguaje ActionScript podemos asociar acciones a cada uno de los estados.
  • SymbolTypes_MovieClip Símbolo Clip de Película (MovieClip): Se utilizan para crear animaciones y contenido interactivo. También podemos controlar estas animaciones y disparar acciones cuando se interaccione con ellos desde el lenguaje ActionScript.

El tipo de símbolo que seleccionesmos aquí controlará el comportamiento por defecto de las instancias de este símbolo. Luego en cada instancia podremos cambiar el comportamiento según nos interese por el tipo de trabajo que estemos realizando con ella. Me refiero sobre todo a los modos de comportamiento MovieClip y Graphic que veremos más en detalle cuando empecemos a hacer animaciones en línea de tiempo.

Opciones Avanzadas

Además del nombre y el tipo de símbolo tenemos una sección expandible en el cuadro de diálogo de la Figura 4, que nos permite ver otras propiedades. La mayoría de ellas tienen que ver con programación en ActionScript, así que no las trataremos aquí.

Figura 4
Figura 4

Propiedades de una instancia

Para ver las propiedades de una instancia de símbolo concreta debemos seleccionarla (Ver Figura 5). Si nos fijamos en el panel de propiedades, podremos ver lo siguiente:

La primera propiedad que aparece es el nombre de instancia. De momento no vamos a preocuparnos de él, pero cuando empecemos a programar será muy importante.

Después aparece un desplegable que nos permite seleccionar el comportamiento de la instancia, en este caso está colocado en MovieClip. Si no cambiamos este valor, será el mismo que el de el tipo de símbolo que escogimos al crear el símbolo original, del que esta instancia es una copia.

Justo debajo, este panel nos indica de qué símbolo procede la instancia seleccionada (Instance of: Pelota). El valor de este campo es un botón, que si pulsamos nos permite editar las propiedades del símbolo (al pulsarlo aparece el diálogo de la Figura 4).

Figura 5
Figura 5

Figura 6
Figura 6
Junto al campo anterior, también tenemos un botón que nos permite intercambiar (Swap…) el símbolo asociado a esta instancia. Recordad que las instancias son referencias a un símbolo. Si intercambiamos el símbolo por otro, los contenidos de la instancia serán intercambiados por los del símbolo que seleccionemos en el cuadro de la Figura 6.

Más abajo, tenemos las propiedades de posición y tamaño que no tienen ningún misterio.

Después tenemos las propiedades de posición y visualización 3D (3D Position and View) de las que nos vamos a olvidar de momento. No juguéis con ellas. El manejo de posiciones, tamaños y animaciones dejan de ser intuitivas en el momento en el que cambiéis sus valores por defecto.

La siguiente sección del panel permite modificar los efectos de color y transparencia que se le pueden aplicar a la instancia, como se explica en el video. Las opciones de fusión se parecen mucho a las opciones de fusión de capa de Photoshop. También tenemos propiedades de accesibilidad, de las que hablaremos en otro momento y, por último, una sección de filtros, que también se perecen bastante a los filtros de Photoshop.

Cualquier cambio en estas propiedades afecta únicamente a la instancia que tengamos seleccionada y no altera el símbolo del que procede.

Trabajo con instancias y símbolos

Al principio, la relación entre instancias y símbolos es confusa.
Recordemos algunos hechos para aliviar esa confusión:

  • Los símbolos viven el la biblioteca, no pueden salir de ahí.
  • A partir de cada símbolo podemos crear tantas instancias como queramos.
  • Las instancias se crean en la escena (o dentro de otro símbolo, como veremos más adelante).
  • Podemos modificar las propiedades de una instancia sin que esto afecte a las demás instancias del mismo símbolo.
  • Si editamos el símbolo los cambios se propagarán a todas sus instancias. Si hemos editado las propiedades de algunas de las instancias estos no se borran, se aplican sobre los cambios en el símbolo.
  • Borrar una instancia de la escena no elimina su símbolo de la biblioteca, ni las otras instancias del mismo. Pero eliminar el símbolo de la biblioteca elimina todas las instancias que se hayan creado a partir de él.

Esto es todo por ahora. En la próxima entrega hablaremos de la línea de tiempo y de las animaciones en flash.

Volver al Índice

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s