Archive for the ‘ AS3 ’ Category

columnas y filas dinamicas en flash

Varias veces me encuentro en la posición de tener que acomodar movieclips dinamicamente en el escenario de forma ordenada. Por ejemplo crear una matriz de imagenes para una galleria.
Aqui dejo un pequeno snipet que permite justamente hacer eso

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var separacionX:Number = 100;
var separacionY:Number = 50;
 
var fila:Number;
var columna:Number;
var numCols:Number = 3;
var numeroDeItems:uint=100;
 
for (var i:int = 0; i < numeroDeItems; i++)
{
    var _item:Item=new Item();
    fila  = Math.floor(i / numCols);
    columna= i - numCols * fila;
    _items.x = columna *  (separacionX + _item.width);
    _items.y = fila *  (separacionY + _item.height);
    addChild(_item);
}

Eventos personalizado en AS3

Hasta hace muy poco tiempo siempre que tenia que hacer un script que esperar a que terminara la animacion de un moviclip para hacer otra cosa, lo que hacia era poner una variable en el ultimo frame de la aminacion del movieclip y luego usaba un setInterval o un onEnterFrame y adentro un if y preguntaba si esa variable habia cambiado.
Por ejemplo algo como:
en el ultimo frame de la animación ponía

1
2
 _root.termino=true;
stop();

y luego en el root ponía

1
2
3
4
5
6
miMovieClip_mc.onEnterFrame = function() {
      if(_root.termino==true) {
             trace ("terminó la animación se prosigue con lo siguiente");
           delete miMovieClip_mc.onEnterFrame;
      }
}

no creo que haya nada de malo en seguir utilizando este método si la aplicación es simple. cuando tenemos varios onEnterFrame o intervals dando vuelta al mismo tiempo.

AS3 se destaca por ser un leguage de programación más robusto y cuenta con todas las propiedades de los leguajes orientados a objetos, y una de esas cosas con los eventos. Por lo cual el dilema anterior queda reducido a simplemente poner un eventListener y luego disparar un evento cuando la animación termina.
Ejemplo:

1
2
3
4
5
6
function terminoAnimacion(event:Event)
{
	trace('terminó la animación');
}
 
miMovieClip_mc.addEventListener("termino", terminoAnimacion);

y luego en el último frame del movieClip disparamos el evento:

1
2
dispatchEvent(new Event("termino"));
stop();

mouseX y mouseY relativo a objetos distintos

Muchas veces necesitamos saber en donde ésta el mouse con respecto a algo. Y en cualquier momento podemos obtener su ubicación relativa al escenario o a un objeto de manera muy simple.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import flash.events.MouseEvent;
 
cuadrado_mc.addEventListener(MouseEvent.MOUSE_OVER, onDown);
function onDown(e:MouseEvent):void
{
    e.target.addEventListener(MouseEvent.MOUSE_MOVE,onMove);
}
 
function onMove(e:MouseEvent):void
{
    trace(e.localX,e.localY);
 
    debug_txt.htmlText="<b>entre del cuadrado</b>\nx: "+e.localX+"\ny: "+e.localY+"\n\n<b>mouse relativo al escenario</b>\nx: "+mouseX+"\ny: "+mouseY;
}

Esto requiero Flash player 9

Generar columnas en Flash

Aca dejo un pequeño tip de como generar columnas en flash facilmente.
La idea en usar un for pero no necesitar de hacer for añidados o usar contadores sino hacer todo en una sola línea usando el símbolo %. Con este “truquico” cada vez que i es divisible por 10 la vuelve cero de forma que el contador en x de este ejemplo decrementa desde -250 de 50 en 50. Lo único valores que peude tomar x son entre -250 y 250 y varía de 50 en 50. Usando este método es muy fácil generar una grilla donde posicionamos elementos.

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
for(var i : int = 0; i< 100; i++){
trace ('x: '+((i%10)-5)*50);
trace('y: '+ ((i/10)-5)*50);
}
//los traces de este ejemplo sería:
/*
x: -250
y: -250
x: -200
y: -245.00000000000003
x: -150
y: -240
x: -100
y: -235
x: -50
y: -229.99999999999997
x: 0
y: -225
x: 50
y: -220.00000000000003
x: 100
y: -215
x: 150
y: -210
x: 200
y: -204.99999999999997
x: -250
y: -200
x: -200
y: -195
x: -150
y: -190
x: -100
y: -185
x: -50
y: -180
x: 0
y: -175
x: 50
y: -170
x: 100
y: -165
x: 150
y: -160
x: 200
...*/

Tierra en paperVision

Estuve jugando con PV3d en Flash Builder 4 y termine con este experimento. es el tipico Hello World, en este caso el nuestro mundo ;-)

El experimento se trató de ver como se comportaban dos texturas una arriba de otra. lo que hice fue crear dos primitivas de, dos esferas, una esfera minimamente más grande que la otra. Luego le apliqué una textura distinta a cada una.  finalmente agregue una particulas con un bitmap que simula ser una extrella.

Como toque final puse un onEnterFrame para renderizar la escena, mientras muevo giro en el eje de la Y ambas esferas a velocidades distintas y tambien muevo minimamente las particulas. Es bastante pesado para el procesador, pero no pain no gain.

Esto requiero Flash player 9

acá dejo el código:

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
package {
import flash.display.BitmapData;
import flash.events.Event;
 
import org.papervision3d.core.math.Number3D;
import org.papervision3d.materials.special.MovieParticleMaterial;
 
import org.papervision3d.core.geom.Particles;
import org.papervision3d.core.geom.renderables.Particle;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.materials.shaders.GouraudShader;
import org.papervision3d.materials.shaders.ShadedMaterial;
import org.papervision3d.materials.shaders.Shader;
import org.papervision3d.materials.special.BitmapParticleMaterial;
import org.papervision3d.materials.special.ParticleBitmap;
import org.papervision3d.materials.special.ParticleMaterial;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.objects.special.ParticleField;
import org.papervision3d.view.BasicView;
 
[SWF (width="450", height="300", backgroundColor="0x000000", frameRate="30")]
 
public class earth extends BasicView
{
 
public var sphere:Sphere;
public var sphere2:Sphere;
 
public var light : PointLight3D;
 
public var shader : Shader;     
 
public var stars : ParticleField;
public var cloudMaterial : BitmapMaterial;
 
[Embed (source="/../assets/Earth.jpg")]
private var EarthMap : Class;
 
[Embed (source="/../assets/star.png")]
private var particleBitmap : Class;
 
[Embed (source="/../assets/earthcloudmap.png")]
private var CloudMap : Class;
 
public var particles : Particles;
public var particle : Particle
public var counter : int = 0 ;
 
public function earth()
{
super(500,400);
 
var earthbmp:BitmapData = new EarthMap().bitmapData;
var earthmaterial:BitmapMaterial = new BitmapMaterial(earthbmp);
 
var clouds : BitmapData = new CloudMap().bitmapData;
 
// luz
light = new PointLight3D();
light.x = 300;
light.y = 300;
 
// tipo de shader que uso...
 
shader = new GouraudShader(light, 0xFFFFFF,0x404040)
 
// y el material.
var shadedmaterial:ShadedMaterial = new ShadedMaterial(earthmaterial, shader);
shadedmaterial.smooth=true;
 
//creo la primer esfera, la tierra
sphere = new Sphere(shadedmaterial, 150,24,16);
 
//material para la nubes
cloudMaterial = new BitmapMaterial(clouds)
cloudMaterial.smooth = true;
cloudMaterial.doubleSided = false;
 
// creo la segunda esfera
sphere2 = new Sphere(cloudMaterial,160,24,16); 
 
//creo el sistema de particulas
particles = new Particles();
 
//saco el bitmap para crear un material que sera aplicado a cada particula
var particlematerial : BitmapParticleMaterial = new BitmapParticleMaterial(new particleBitmap().bitmapData,0.5,-32,-32);
 
//creo 500 estrellas y la dispongo en el espacio entre 1000 y -500
for(var i : int = 0; i< 500; i++)
{
var particle : Particle = new Particle(particlematerial, 1, (Math.random()*1000) -500, (Math.random()*1000) -500, (Math.random()*3000) -1500);
particles.addParticle(particle);
}
//agrego al sceneario el sistema de particulas
scene.addChild(particles);
 
//agrego la tierra
scene.addChild(sphere);
//agrego las nubes
scene.addChild(sphere2); 
 
//punto de interes de la camara
camera.fov = 30;
 
addEventListener(Event.ENTER_FRAME, enterFrame);             
 
}
 
public function enterFrame(e:Event) : void
{
counter++;
 
sphere.yaw(-1);
sphere2.yaw(-0.5);
particles.yaw(-0.01);
particles.pitch(-0.01);
 
//camera.x = Math.sin(counter*0.02) * 2000;  si quieren que sea automatico en vez de seguir el mouse lo pueden hacer con una onda senoidal
camera.x = ((320-mouseX)*0.01) * 2000;
singleRender();
 
}
 
}
}