Usando símbolos con ActionScript 3

17 de octubre de 2010

Libro electrónico gratis:<br>Miguel de Cervantes Don Quijote
Libro electrónico gratis:
Miguel de Cervantes
Don Quijote
Libro electrónico gratis:<br>Manuel Payno El fistol del diablo
Libro electrónico gratis:
Manuel Payno
El fistol del diablo
Libro electrónico gratis:<br>Fray Bartolomé de las Casas Breve relación de la destrucción de las Indias Occidentales
Libro electrónico gratis:
Fray Bartolomé de las Casas
Breve relación de la destrucción de las Indias Occidentales

En Adobe Flash una forma de utilizar símbolos (symbols) es arrastrarlos desde la biblioteca (library) hacia el escenario (stage).

Pero también se puede utilizar Action Script 3 para insertar en una animación símbolos localizados en la biblioteca.

A continuación se muestra como insertar símbolos del tipo clip de película (movieclip) y botones (button) en una animacion usando Action Script 3. Los símbolos de tipo gráfico (graphic) no pueden ser insertados en una animación usando Action Script 3. Los símbolos del tipo mapa de bits(bitmap), componentes(component) y sonido (sound) emplean un procedimiento diferente al aquí descrito.

Para insertar un símbolo con Action Script 3 hay que abrir la ventana de la biblioteca, esto puede hacerse desde la barra de herramientas con la opción ventana (window) y luego elegir la opción Biblioteca (Library):

En la ventana de la Biblioteca hacemos click sobre nuestro símbolo con el botón derecho del ratón y se desplegará un menú:

En el menú que aparezca se debe hacer click en la opción Vinculación (Linkage)

Se abrirá una nueva ventana mostrando las propiedades de vinculación (Linkage Properties) de nuestro símbolo:

Para poder usar nuestro símbolo con Action Script 3 debemos activar la opción Exportar para Action Script (Export for Action Script):

Se activará automáticamente la opción exportar en primer fotograma (Export in first frame):

También se activarán y se llenaran automáticamente los campos Clase (Class) y Clase Base (Base Class):

En el campo clase (class) aparecerá el "nombre" del símbolo, el cual debemos utilizar para referirnos a él en Action Script 3, en este ejemplo "simbolo_con_as3":

Para terminar es necesario presionar el botón OK / ACEPTAR:

Aparecerá una advertencia indicándonos que aún no existe una definición para esta clase pero que automáticamente se creará una. Hay que hacer click en OK / ACEPTAR:

Tras haber exportando nuestro símbolo es posible ya utilizarlo.

Para insertar el símbolo en nuestro escenario (stage) es necesario usar este código:

var simbolo_en_escenario:simbolo_con_as3 = new simbolo_con_as3();
// crea la variable simbolo_en_escenario en ella se guardará
// una copia de nuestro simbolo "simbolo_con_as3" (crea una instancia)

addChild(simbolo_en_escenario);
// agrega el simbolo al escenario

 

Como puede verse insertar en una animación símbolos localizados en la biblioteca usando Action Script 3 es diferente a hacerlo con Action Script 2. La funcion attachMovie() de Action Script 2 se ha vuelto obsoleta, ya no se usa.

¿Qué es lo que se hizo? Al activar la opción Exportar para Action Script permitimos que nuestro símbolo pueda insertarse dentro de nuestra animación usando Action Script.

Al activar la opción exportar en primer fotograma se le indica a flash que el símbolo se cargará automáticamente al inicio de la animación aún si el símbolo se usa al final de la animación. Téngase esto en cuenta para considerar los tiempos de descarga. Si hay 50 símbolos exportados en el primer fotograma, los 50 símbolos tendrán que cargarse antes de que la animación comience a reproducirse.

Los campos Clase (Class) y Clase Base (Base Class) se activan y se llenan automáticamente. En el campo clase (class) aparecerá el "nombre" del símbolo el cual debemos utilizar para referirnos a él en Action Script 3:

En una animación NO PUEDE haber dos símbolos diferentes con el mismo "nombre", que utilicen la misma clase. Muchos errores al publicar el archivo .swf se deben al uso de dos símbolos diferentes que usan la misma clase, el mismo nombre. Este error es muy común cuando se usan paquetes (packages) externos. Es un error crear en el paquete un símbolo / objeto con el nombre "simbolox" y al mismo tiempo crear en la biblioteca un símbolo con el nombre "simbolox".

Al incurrir en este error el mismo programa alertaría sobre esta situación:

Traducción. "Por favor ingrese un nombre de clase único que no esté asociado con otro símbolo en la biblioteca."

Se puede hacer caso omiso a esta advertencia. Se puede incluso publicar el archivo .swf pese a esta advertencia. El resultado será que "algo" no funcionará en nuestra animación...

Insisto por que es muy importante y es motivo de desvelos: en una animación NO PUEDE haber dos símbolos diferentes usando la misma clase, con el mismo "nombre".

En el campo Clase Base (Base Class) aparecerá la clase a la que pertenece nuestro símbolo. La clase a la que pertenece nuestro símbolo determina los metodos y propiedades que posee. Por omisión la Clase Base de un clip de película es flash.display.MovieClip; con ello nuestro símbolo "hereda" los métodos, eventos y propiedades propias de un clip de película por ejemplo los métodos gotoAndPlay(); y stop();

A continuación se explica línea por línea el código anterior. En color crema se señala lo que NO DEBE MODIFICARSE pues son las funciones predefinidas de Action Script 3..

var simbolo_en_escenario: simbolo_con_as3 = new simbolo_con_as3();

Crea la variable simbolo_en_escenario que almacenará a nuestro símbolo. La palabra "simbolo_con_as3" después de los dos puntos : se refiere al "nombre" (la clase) de nuestro símbolo en la biblioteca. La palabra "simbolo_con_as3" después la palabra new se refiere al "nombre" (la clase) de nuestro símbolo en la biblioteca. Es fundamental escribir en los dos casos exactamente igual el nombre (la clase) de nuestro símbolo para evitar errores.

addChild(simbolo_en_escenario);

Con el método addChild se despliega en el escenario/stage el simbolo previamente creado.

¿Para que tanta complicación para insertar un símbolo? ¿No es más fácil arrastrar el símbolo al escenario?

Usar Action Script 3 para insertar símbolos tiene ventajas. Con Action Script 3 podemos por ejemplo:

Este un ejemplo sencillo de lo que se puede hacer insertando símbolos con Action Script 3:

En el ejemplo arriba mostrado:

Este es el código utilizado:

for(var i:int=1; i<50; i++)
// con ayuda del bucle for creo 50 símbolos en el escenario
{

var simbolo_en_escenario:simbolo_con_as3=new simbolo_con_as3();
// crea una copia de nuestro símbolo llamado "simbolo_con_as3"

simbolo_en_escenario.x=Math.ceil(Math.random()*490);
// defino una posición para el símbolo en el plano "x" al azar entre 0 y 490
// cada símbolo tiene una posición diferente

simbolo_en_escenario.y=Math.ceil(Math.random()*190);
// defino una posición para el símbolo en el plano "y" al azar entre 0 y 190
// cada símbolo tiene una posición diferente

simbolo_en_escenario.alpha=Math.random();
// defino un alpha / transparencia al azar para el símbolo
// cada símbolo tiene un alpha diferente

simbolo_en_escenario.speed = Math.ceil(Math.random()*10)
// define la velocidad para cada símbolo entre 1 y 10 pixeles por fotograma
// cada símbolo tiene una velocidad única

addChild(simbolo_en_escenario);
// se despliega en el escenario/stage el símbolo previamente creado

simbolo_en_escenario.addEventListener(Event.ENTER_FRAME, mover);
// asigno a cada símbolo la función / método mover
// la función se activa con el evento ENTER_FRAME
// cada vez que la película cambia de fotograma, el símbolo se mueve

}

function mover(ev:Event):void
// creo la función / método que moverá los símbolos
{
if(ev.target.x > 600)
// si el símbolo se sale del escenario
{
ev.target.x = 0;
// lo regreso a la posición 0 en el plano de "x"

ev.target.y=Math.ceil(Math.random()*190);
// defino una nueva posición al azar entre 0 y 190 para el símbolo en el plano de "y"

}
else
// si el símbolo está dentro del escenario
{
ev.target.x += ev.target.speed;
// lo desplazo en el plano de "x" acorde a su velocidad
}
}

Están disponibles los archivos .fla de este ejercicio para un análisis más detallado.

Sitios de interés:

Creando animaciones con canvas, javascript y HTML5

Swiffy, una herramienta para crear animaciones canvas a partir de animaciones Flash

Mostrando contenido alternativo a flash

¿HTML5 como alternativa a Adobe Flash?

Usando clases (class) y objetos en ActionScript 3

Usando símbolos del tipo bitmap con ActionScript 3

Usando símbolos con ActionScript 3

Cargando un archivo .swf dentro de otro con ActionScript 3


Comenta y opina este texto     Lee mi libro de visitas
© 1997-2024 Alain García
albegago@hotmail.com
Twitter: Youtube @feesgo
YouTube Youtube
El vínculo a este documento es:

Compartir en facebook Compartir en twitter Compartir en whatsapp Rss

Puedes apoyar a este sitio invitándome a comer...

Este sitio utiliza cookies propias y de terceros para mejorar sus servicios. Si continua navegando, entendemos que acepta su uso. Política de Privacidad