Cómo usar la herramienta Deco Effect de Flash CS4

Junto con la aparición de la nueva suite de Adobe, se aguardaron por varias sorpresas en Flash de las cuales algunas fueron ciertas, aunque hubo otras completamente inesperadas.
Tal es el caso de la nueva herramienta Deco Tool.

Es por ello que en este Tip, pretendo mostrar un poco sobre esta genial y sencilla herramienta. La cual quizá facilitara mucho el trabajo de algunos diseñadores, ¿y por que no?, también el de algunos pocos programadores.

La Herramienta a grandes rasgos

Permite añadir un tramado continuo, o patrón a lo largo de todo el documento, efecto similar al que se utiliza en Photoshop con su cubo de pintura, pero con la diferencia de que aquí, al personalizar el tramado puedes agregar un clip de película (a partir de aquí, MC) en lugar de una sola imagen.

Por lo que de una manera mas ambiciosa nos da la oportunidad de agregar sus acciones de Action Script, o las animaciones que este clip contenga.

Probando

• NOTA: Para hacer uso de la herramienta, obviamente necesitaras las versión CS4 de Flash.

1. Primero vamos a crear un documento nuevo, donde las medidas del mismo no importan mucho. Yo en este caso emplee 410 por 230 pixeles.
   
2. Seleccionamos la herramienta Deco Tool, y antes de utilizarla, mostraré aspectos básicos de la misma. Para ello debes abrir el panel de Propierties/Propiedades, tal y como se muestra en la siguiente imagen.
   
   
   
   
   
   Como podras ver, este panel esta dividido en dos secciones
   
   
   • Drawing Effect: Es aquí de donde elegiremos el MC, o no, para dibujar nuestro patrón. Adelante retomo esta parte mejor.
     
   • Advanced Options: En cambio, aquí podemos elegir cuantos pixeles se dejan como margen entre los MCs, así como la escala con la que serán dibujados. Si te fijas, deje solamente unos 5 pixeles de margen, a una escala del 100%
   
   
   
3. Ahora, volviendo al panel de arriba. Podemos dejar el recuadro fill vacío, y Flash solamente dibujará un patrón de lunares o cuadros sin mucha ciencia. En cambio podemos crear en el escenario un MC y así poder personalizar un poco mas el resultado. Creamos un nuevo MC en el que trabajaremos, y daremos click en el botón Edit y seleccionaremos el MC de nuestra biblioteca.
   
4. Yo cree un pequeño lunar de unos 8 pixeles de diámetro, que de momento no presenta mayor gracia. Aquí podemos dar un click sobre el escenario con nuestra herramienta Deco, y veras como aparecen dentro de un grupo ordenado todos los MCs ya duplicados.
   
   
   Como veras, el resultado no deja de ser mas que un simple patrón de lunares

• Puedes entrar a la biblioteca, donde tienes tu MC, y entrar a su modo de edición, con un doble click basta para ello. Una ves ahí agregar unas Interpolaciones de Movimiento/Motion Tween al aparecer el MC, y hacer que se vea mas dinámico todo.
  
• Otra opción es que agregues algunas Interpolaciones de Forma/Shape Tween, y hacer que constantemente todos los MCs estñen cambiando de color, destelleen, crezcan o se encojan.
  
• Finalmente, utilizando un poco de AS3, hacer las dos cosas anteriores sin tanta linea de tiempo y que respondan a algún método del mouse.

Selecciona el unico keyframe en este caso, del MC que estamos editando. Y agrega el siguiente codigo al panel de Acciones/Actions:

Código :

import fl.transitions.*;
import fl.transitions.easing.*;
this.alpha = 0.5;
//
addEventListener(MouseEvent.ROLL_OVER, roll_over);
function roll_over(e:MouseEvent):void{
var xSize:Tween = new Tween(this, \"scaleX\", Regular.easeOut, 1, 2, 5, false);
var ySize:Tween = new Tween(this, \"scaleY\", Regular.easeOut, 1, 2, 5, false);
var alfa:Tween = new Tween(this, \"alpha\", Regular.easeIn, 0.5, 1, 5, false);}
//
addEventListener(MouseEvent.ROLL_OUT, roll_out);
function roll_out(e:MouseEvent):void{
var xSize:Tween = new Tween(this, \"scaleX\", Regular.easeOut, 2, 1, 5, false);
var ySize:Tween = new Tween(this, \"scaleY\", Regular.easeOut, 2, 1, 5, false);
var alfa:Tween = new Tween(this, \"alpha\", Regular.easeIn, 1, 0.5, 5, false);}

• NOTA: Como podrás darte cuenta, el código solamente hace un par de interpolaciones de alpha y tamaño mediante la clase Tween. Si tienes dudas sobre ello, te recomiendo este excelente Tip al respecto.

Sal de tu MC, llega hasta el escenario y prueba la película nuevamente. El resultado será parecido a este:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.