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.

En el pasado tutorial de Flash explicamos cómo hacer que Flash “espere” determinado tiempo en cualquier fotograma mediante unas sencillas líneas de codigo. En este tutorial explicaré como hacer que se repita una animación en una línea de tiempo determinado número de veces antes de continuar. Hacer este tipo de tareas con Action Script tiene la ventaja que evita largas líneas de tiempo y ahorra tiempo de edición.

En la línea de tiempo donde se encuentra la animación, agregue una nueva capa. En esta capa colocaremos el código. Nombre la capa as (o como desee, pero recuerde darle un nombre que indique que en ella va a colocar solamente las acciones). Sobre la capa as  sitúe el cursor sobre el primer fotograma, de clic derecho y active desde el menú contextual Actions.

En el fotograma no. 1 escriba el siguiente código (las líneas de código aparecen en rojo):
var repetir:Number = 0;
En el fotograma donde termina la animación, en nuestro caso el fotograma no. 25 (el logotipo al 100% de opacidad) escriba en la capa de acciones:

repetir++;
if (repetir <3) {
this.gotoAndPlay (2);
}else{
this.play();
}

En el último fotograma colocamos una acción que detiene la animación, así que escribimos:

stop ();

Explicación

Fotograma 1:
var repetir:Number = 0; crea una nueva variable llamada repetir cuyo valor es numérico :Number y le asigna un valor inicial de 0

Fotograma 24:
repetir++;

Aquí le indicamos al reproductor que la variable repetir debe incrementarse progresivamente. Esto quiere decir que el valor inicial de la variable es 0, y cada vez que el reproductor llegue a este fotograma (25) la variable se incrementará en 1 así que su valor será 1 la segunda vez, 2 la tercera vez y así sucesivamente.

if (repetir <3) {

Si el valor de la variable repetir es menor de 3 (el número de veces que deseamos que se repita la animación), entonces se ejecutará este comando:

this.gotoAndPlay (2);

ordenamos al reproductor ir al fotograma no. 2 y reproducir

}else{
this.play();

Cuando el reproductor haya regresado 3 veces al fotograma no. 2 la condición ya no se cumplirá – ya que repetir será mayor que 3-  entonces la animación continuará en el fotograma no. 26.

Puede ver el resultado final aquí.

Por: Iván Gómez S.

¿Dudas y preguntas? Visita nuestros foros Xpert.