Adobe Colombia & Latinoamérica

Uno de los retos de un diseñador Flash es poder generar movimiento aleatorio con objetos — por ejemplo lluvia, particulas, explosiones, etc.- Realizar esta tarea manualmente puede resultar bastante dispendioso, eso sin contar los futuros cambios que tengan que hacerse a la animación.

La mejor alternativa para generar esta clase de moviento es utilizando Action Script. Sin embargo, la verdad no es muy fácil descifrar el código para lograrlo. La solución está en utilizar componentes que no son otra cosa que archivos “compilados”, -esto es, con el código ya insertado- los cuales se instalan como extensiones para Flash y luego pueden ser utilizados como un clip de película normal a los que se les pueden establecen parametros.

Particle Explorer es un componente para Flash que permite generar particulas de una manera bastante fácil, de manera visual (lo más importante!) y sin tener que involucrarse mucho con código.

1. Ingresa a http://rogue-development.com/ y haz clic en Pulse Particles.
2. En Downloads (Descargas), descarga desde el link Download From Google Code el paquete ParticleEmmiter-0016.mxp y PulseParticle-1.0.0016-src.zip.

Para utilizar el emisor de particulas

1. En un documento de Flash crea un clip de película que servirá de partícula y en el panel de Biblioteca haz clic derecho sobre el clip y activa desde el menú contextual Properties (Propiedades). Luego, en el cuadro de diálogo activa “Export For Actionscript” y asigna un nombre en el campo Class (en nuestro caso Logo).



2. Para preestablecer el efecto de particula deseado, abre en tu navegador esta  página y determina en cada una de las pestañas Emmiter, Inital y Rules, el comportamiento de las particulas.
3. Luego desde la pestaña Export copia el codigo que aparece en el cuadro Config:.



4. Nuevamente en Flash, arrastra desde el panel Components (Componentes) una instancia del componente ParticleEmitter al área de trabajo. Ten en cuenta que puedes arrastrar el componente dentro de cualquier línea de tiempo de cualquier clip de pelicula.
5. Abre el panel Component Inspector (Inspector de Componentes) y pega en el campo config el código que copiaste en el paso 1. Asigna el nombre de la particula (Logo) en el campo MovieClipName y escribe el mismo valor de pps (partículas por segundo) que aparece en la parte inferior del campo pps.

Finalmente prueba tu película (Ctrl + Enter) y haz los ajustes necesarios desde el panel del componente. Este es un  ejemplo.

Si necesitas información o ayuda con ActionScript 3, recuerda que ofrecemos cursos en todos los niveles. Igualmente puedes colocar tus dudas e inquietudes en nuestros foros Xpert.

Por: Iván Gómez S.

Este tutorial mostrará cómo crear fácilmente una sencilla galería de imágenes en Flash con ActionScript 3 y XML. Puedes ver el resultado final y descargar el archivo .fla completamente comentado y el archivo XML usado.

Para este ejercicio hemos usado:

1. Un archivo .fla el cual contiene dos botones (anterior_btn y siguiente_btn) y una caja de texto dinámico (descripcion_txt).
2. Una carpeta llamada imagenes que naturalmente contiene las fotos que usamos en el ejercicio.
3. Un archivo XML el cual tiene como atributos de sus etiquetas un id, la ruta de las imagenes (imagen) y una descripción.

<galeria titulo=”titulo galeria”>
<foto id=”1″  imagen=”imagenes/foto1.jpg” descripcion=”texto 1″/>
<foto id=”2″  imagen=”imagenes/foto2.jpg” descripcion=”texto 2″/>
<foto id=”2″  imagen=”imagenes/foto3.jpg” descripcion=”texto 3″/>
</galeria>

En la línea de tiempo principal del .fla se encuentra el script:

var carga:URLLoader = new URLLoader();
var xmlExterno:XML;
var i:Number=0;
var lista:XMLList;
var total:Number;
var fotos = new Loader();
addChild(fotos);
fotos.x = 100;
fotos.y=50;

carga.load(new URLRequest(“galeria.xml”));
carga.addEventListener(Event.COMPLETE,cargarXML);

function cargarXML(evento:Event)
{
xmlExterno = new XML(evento.target.data)
lista=xmlExterno.children();
total=lista.length();
descripcion_txt.text=lista[i].attribute(“descripcion”);
fotos.load(new URLRequest(lista[i].attribute(“imagen”)));
}

siguiente_btn.addEventListener(MouseEvent.CLICK, siguiente);
anterior_btn.addEventListener(MouseEvent.CLICK, atras);

function siguiente(event:MouseEvent)
{
if (i<total-1)
{
i++;
descripcion_txt.text=lista[i].attribute(“descripcion”);
fotos.load(new URLRequest(lista[i].attribute(“imagen”)));
}
}

function atras(event:MouseEvent)
{
if (i>0)
{
i–;
descripcion_txt.text=lista[i].attribute(“descripcion”);
fotos.load(new URLRequest(lista[i].attribute(“imagen”)));
}
}

Tutorial enviado por: Sandra Cano

¿Dudas y preguntas? Visita nuestros foros Xpert.

Este tutorial mostrará como realizar una película Flash que mantenga la posición de algunos elementos y su correcta escala cuando se vea en monitores de diferentes resoluciones. En este ejemplo vamos a evaluar 2 tamaños de monitor (1280*1024 y 1024*768) pero se pueden evaluar mas tamaños.Puedes descargar el archivo .fla final el cual se encuentra comentado o ver la página .html con el archivo .swf. En el ejemplo tenemos un logo, el fondo, un menú y un texto dinámico que nos mostrará las dimensiones de la película en pixeles.

Realizamos los siguientes pasos:

1. Modifica los puntos de registro de los elementos de acuerdo a la posición de los mismos en el stage para poder ubicarlos fácilmente con ActionScript. En nuestro ejemplo usamos:
   - Logo = izquierda arriba
   - Menu = Abajo izquierda
   - Fondo = Centro

   

2. En las opciones de publicación (Publish Settings) en el tab HTML configuramos estas opciones:
   - Dimensiones (Dimensions): Percent (100 * 100)
   - Escala (Scale): No Scale
   
3. Ahora agregamos las siguientes líneas de código en el panel de Acciones (el código es AS3 y se encuentra totalmente comentado para que puedan entenderlo fácilmente) :

=============

stage.scaleMode=StageScaleMode.NO_SCALE; //el stage no se escalará automáticamente
stage.align=StageAlign.TOP_LEFT; // la alineación del stage será arriba a la izquierda

f_Redimensiona();

var prop:Number=stage.stageWidth /stage.stageHeight; //la variable prop contiene el valor de la proporción del stage (ancho-alto)

stage.addEventListener(Event.RESIZE, f_Redimensiona); //listener que ejecutará la función en el momento que la ventana del navegador o del player sea redimensionada

function f_Redimensiona (evento:Event=null):void // función que ubica y redimensiona elementos
{
resolucion_txt.text=stage.stageWidth + “X” +  stage.stageHeight; //la caja de texto dinámico muestra las dimensiones de la película
logo_mc.x=5; //el logo estará alineado en la parte izquierda del stage con una distancia de 5 px
logo_mc.y=5; //el logo estará alineado en la parte superior del stage con una distancia de 5 px
menu_mc.x=5; //el menú estará alineado en la parte izquierda del stage con una distancia de 5 px
menu_mc.y=stage.stageHeight -5; //el menú es ubicado en la parte inferior del stage con una separacion de 5 px
resolucion_txt.x=stage.stageWidth/2; //El borde izquierdo de la caja de texto que muestra la resolución se ubica en la mitad del Stage
if(prop >1.25) //este condicional evalúa si la proporción es mayor a 1.25 (un monitor de 1280*1024 tiene una    proporcion de 1.25 y un monitor de 1024*768 tiene un proporcion de 1.33)
{
back_mc.scaleX=stage.stageWidth/1280; //si la proporción ancho/alto del stage es mayor a 1.25 la escala horizontal del fondo es igual a dividir el ancho del stage entre 1280 (la proporción nos hace asumir que es un monitor de 1280)
back_mc.scaleY=back_mc.scaleX; //para mantener la proporción, la escala vertical del fondo es igual a la escala vertical
}else
{
back_mc.scaleY=stage.stageHeight/1024; //si la proporción ancho/alto del stage es menor o igual a 1.25 la escala horizontal del fondo es igual a dividir el ancho del stage entre 1024 (la proporción nos hace asumir que es un monitor de 1024)
back_mc.scaleX=back_mc.scaleY; //para mantener la proporción, la escala vertical del fondo es igual a la escala vertical
}
back_mc.x=stage.stageWidth/2; //el fondo estará  centrado a la mitad al ancho
back_mc.y=stage.stageHeight/2; //el fondo estará  centrado a la mitad al alto
}

============

Tutorial enviado por: Luis Felipe Tibata

¿Dudas y preguntas? Visita nuestros foros Xpert.