« The IT Crowd
Mondo sonoro y Eina »
 
por Andros
10/08/09

This movie requires Flash Player 9

Hace un tiempo posteé un experimento que recuperé del fondo del cajón porque me hacia gracia. Hace poco lo necesité para un proyecto actual, así que tuve que pasarlo a ActionScript 3.0, y de paso aprovecho para enseñar el funcionamiento.

El código en sí no es nada del otro mundo (de hecho es muy básico), pero quiero mostrar como, aplicados con un poco de gracia, se pueden usar los filtros de Flash (a veces infravalorados por diseñadores demasiado puristas) para darle un toque orgánico muy “especial”, sólo con código, sin ningún elemento en la biblioteca, el .swf tan sólo pesa 1Kb.

Para usar éste ejemplo sólo hay que crear un archivo .fla a 60fps al cual se le asigna una clase principal llamada Main que es un archivo .as donde pegaremos esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

package {
  import flash.display.Sprite;
  import flash.display.Shape;
  import flash.events.TimerEvent;
  import flash.geom.Point;
  import flash.utils.Timer;
  import flash.filters.BevelFilter;
  import flash.filters.DropShadowFilter;
  import flash.ui.Mouse;
  public class Main extends Sprite {
    private var num:uint=40;
    private var vel:Number=2.2;
    private var timer:Timer;
    private var puntos:Array;
    private var dibu:Shape;
    public function Main():void {
      puntos=new Array();
      for (var i:uint=0; i < num; i++) {
	puntos.push(new Point(190,190));
      }
      // - Dibujo
      dibu = new Shape();
      addChild(dibu);
      // - Filters
      filtros(dibu,1.9,0x000000,0,45);
      // - Timer
      timer=new Timer(16);
      timer.addEventListener("timer",mueve);
      timer.start();
      // - Escondemos el Mouse
      Mouse.hide();
    }
    private function mueve(e:TimerEvent):void {
      // - Mouse
      puntos[0].x=mouseX;
      puntos[0].y=mouseY;
      // - Dibuja
      dibu.graphics.clear();
      dibu.graphics.moveTo(puntos[0].x,puntos[0].y);
      for (var i:uint=1; i < num; i++) {
	dibu.graphics.lineStyle(num-i, 0x66CCFF);
	var p1:Point=puntos[i];
	var p2:Point=puntos[i-1];
	p1.x += (p2.x - p1.x) / vel;
	p1.y += (p2.y - p1.y) / vel;
	dibu.graphics.lineTo(p1.x,p1.y);
      }
   }
   // - Filters
   private function filtros(mc:Shape, grosor:Number, col:uint, espacio:Number, angulo:uint):void {
      var filterArray:Array = new Array();
      // - Volumen
      filterArray.push(new BevelFilter(1, -45, 0x000000, .5, 0xffffff, .0, 10, 10, 100, 3));
      // - Borde
      filterArray.push(new DropShadowFilter(espacio, angulo, col, 100, grosor, grosor, 100, 3));
      // - Sombra               
      filterArray.push(new DropShadowFilter(3, 135, 0x000000, .15, 2, 2, 100, 1));
      mc.filters = filterArray;
    }
  }
}

En éste ejemplo uso un Timer para crear el intervalo, pero se puede usar un EnterFrame si se prefiere.
Yo usé Timer porque la diferencia no es tan abismal entre Mac y PC, ya que los Mac PPC ralentizan bastante el flujo con onEnterFrame, en comparación con los PC’s.
Podéis entender mejor las diferencias entre Timer y onEnterFrame en éste estupendo post del señor Llops.

Categoria:
Cocobongo artworks, Experimental Lab, MakingOf, Script
Ningún comentario »

Deja un comentario