Xpert - Adobe Colombia Blog

Los Timeline Effects son una característica que apareció en Flash MX 2004 la cual consistía en animaciones que se podían reutilizar (nada del otro mundo en realidad). Si eras fan de esta característica y actualizaste ya a Flash CS4 seguramente llorarás al darte cuenta que fué removida de esta versión, sin embargo fué reemplazada por una característica mucho más flexible llamada Motion Presets (Window/Motion Presets) la cual permite usar los presets que trae el programa por defecto y crear tus propios presets.

El nombre en español de esta característica es “Configuración Predefinida de Movimiento”, un poco más largo pero se trata de los mismo.

• Ayuda Adobe sobre Motion Presets (Español)
• Video AdobeTV sobre Motion Presets (Inglés)
• Tutorial en Kirupa sobre Motion Presets (Inglés)

Popularity: 6% [?]

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.

Popularity: 29% [?]

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.

Popularity: 31% [?]

Aunque en Flash los Display Object (Sprites, MovieClips, etc) tienen solo dos dimensiones (X, Y) el nuevo Flash Player 10 incluye un tercer eje que permite modificar la profundidad de planos y su rotación en los ejes X, Y y Z y con lo cual es posible crear interesantes efectos. Esta característica es aprovechada por las nuevas herramientas de Flash CS4 y por las nuevas clases de ActionScript 3.

Las posibilidades son múltiples pero para dar una pequeño ejemplo observen este código:

function rotar():void
{
objeto.rotationX+=numero;
objeto.rotationY+=numero;
objeto.rotationZ+=numero;
}

La función anterior le aplica a la instancia objeto una rotación a cada uno de los ejes x,y,z cuyo valor en grados corresponde a numero. Objeto puede ser un texto, grafico, video, etc.

Un ejemplo de este tipo de rotación en varios ejes aplicada a un video. Este ejemplo requiere tener instalado Flash Player 10 para visualizarlo. Puedes descargar el Flash Player 10 directamente de Flash Player Download Center.

Ayuda online de ActionScript 3.0 (actualizado a características del Flash Player 10).

Popularity: 18% [?]

Adobe ha liberado la versión 10 de su reproductor de Flash el cual trae interesantes novedades entre las cuales están:

Efectos 3D: Ya no hay que ser un master para hacer increíbles efectos en 3D que se pueden crear con las herramientas de Flash CS4 o con ActionScript 3.

Nuevo engine de texto: Las capacidades para creación, y edición de texto han sido mejoradas lo cual permitirá formatear texto con mas facilidad y de manera mas profesional.

Efectos y filtros nuevos: Flash ha adoptado Pixel Bender, la misma tecnología usada para After Effects lo cual permitirá realizar asombrosos efectos.

Puedes ver todas las características de este nuevo player en el sitio web de Adobe.

Necesitamos descargarlo e instalarlo? Por su puesto, en pocos días será lanzado a la venta Adobe Flash CS4 el cual tiene opciones que hará necesaria esta versión de player para reproducir sus animaciones.

Les dejo un video del Keynote 360 Flex donde puede ver en acción algunas de estas características:

Puede descargar el Flash Player 10 directamente de Flash Player Download Center.

Ejemplos de filtros creados con Pixel Bender.

Por otra parte, ya puedes desempolvar tu tarjeta de crédito o hacer el presupuesto en tu empresa pues ye es posible comprar Adobe CS4! Para los que se preguntaban por que las betas públicas de Dreamweaver, Fireworks y Soundbooth les dejó de funcionar ya saben la respuesta.

Popularity: 19% [?]

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.

Popularity: 31% [?]

Animar contenido desde Illustrator para colocar en Flash es muy sencillo. Se pueden crear efectos muy interesantes que en Flash sería casí imposible lograr.

1. En Illustrator seleccione un objeto, vaya al menú Effect y seleccione Stylize/Scribble.
   En el cuadro de opciones del efecto ajuste los parámetros gusto.
2. Cree un duplicado del objeto y abra el panel de Appeareance.
3. Dé doble clic sobre el icono del efecto Scribble. Esto abrirá nuevamente la ventana de opciones del efecto. Modifique nuevamente los ajustes.
4. En el panel de herramientas, active la herramienta de Blend. Haga clic sobre uno de los objetos y luego clic en el otro objeto. Puede especificar el número de pasos de la mezcla haciendo doble clic sobre la herramienta Blend.

   

5. En el menú File seleccione Export... active la opción Macromedia Flash (*.swf ),
   y en el cuadro de diálogo que aparece a continuación active las opciones que se indican.

En Flash, importe el archivo .swf a la línea de tiempo actual o a la biblioteca y haga los cambios necesarios.

Ver resultado final con algunos ajustes dentro de Flash.

Por: Iván Gómez S.

¿Dudas y preguntas? Visita nuestros foros Xpert.

Popularity: 35% [?]

En esta entrega del Podcast Xpert mostramos las novedades de Adobe Flash CS4:

 

 Novedades de Adobe Flash CS4: Play Now | Play in Popup

Popularity: 38% [?]

Para pausar una película de flash por algunos segundos, tenemos que extender la línea de tiempo añadiendo fotogramas hasta completar el tiempo de espera deseado. Este procedimiento resulta tedioso y origina líneas de tiempo muy largas, y lo peor es que, si se desea aumentar o reducir el tiempo, nos vemos obligados a, nuevamente, incrementar o quitar fotogramas.

Afortunadamente, se pueden evitar este tipo de tareas utilizando ActionScript.

1. Cree una nueva capa de acciones y nómbrela, en nuestro caso la he llamado as. Este es un procedimiento recomendado para evitar tener el código disperso en toda la línea de tiempo.
2. Vaya al fotograma donde desea que se detenga la película e inserte un nuevo fotograma clave (F6).
3. De clic derecho (Ctrl+clic en Mac) y habilite Actions.
4. Escriba en el panel de acciones el siguiente código:

   stop ();
   pausa = setInterval(siga, 2000);
   function siga() {
   play();
   }

Explicación:

La primera línea de código stop (); detiene la película en el fotograma en el cual está la acción. La línea 3 define la variable pausa que es igual a la función setInterval que tiene 2 parámetros: siga es la función que se llama cuando se cumpla el tiempo especificado y 2000 es el tiempo  (en milisegundos) que dura detenido el reproductor en el fotograma. Las líneas 5 a 7 definen la función siga, o sea la acción que se debe ejectuar una vez se cumpla el tiempo. En nuestro caso, queremos que la película continue en el siguiente fotograma así que insertamos play ();

Por: Iván Gómez S.

Dudas y preguntas? Visita nuestro foro

Popularity: 22% [?]

Adobe ha dispuesto una interesante muestra de videos en alta definición (High Definition) haciendo gala de las capacitades de su reproductor Flash Player. Pueden ver todos los video en el sitio web Adobe.

Popularity: 15% [?]