Añadir una foto al escenario, crear una rejilla con celdas, localizar la celda que tiene el elemento que queremos de la foto, marcarlo con un icono de nuestra biblioteca y.. poder escalar esa foto junto a la rejilla pero sin perder las coordenadas de localización de nuestro icono señalador. No me sirve si incluimos el mc del icono en uno de los MCs que se escalan, se trata de que el icono siga manteniendo su tamaño y ajustado en _x e _y a la celda que queremos.
Hubiese subido el .FLA en (AS2) para que lo vieseis funcionando, pero con este código y creando estos dos símbolos (MovieClip) en la biblioteca os podéis hacer una idea:
- icono (vinculado como icono) --> podeis dibujar un circulo de 30 x 30 px y ajustado a _x:0 e _y:0
- foto (vinculado como foto) --> cualquier foto con 450 x 330 px, y algún elemento para destacar en el centro. La mía tiene un pájaro.
Código :
Stage.align = "LT";
Stage.scaleMode = "noScale";
miListener = new Object();
miListener.onResize = function() {
escalar();
};
Stage.addListener(miListener);
//
function escalar() {
foto._width = Stage.width;
foto._height = Stage.height;
rejilla._width = foto._width;
rejilla._height = foto._height;
//
icono._x = rejilla["celda" + celdaPajaro]._x;
icono._y = rejilla["celda" + celdaPajaro]._y;
}
// añadimos la foto al escenario
this.attachMovie("foto","foto",this.getNextHighestDepth());
//ahora creamos una rejilla sobre la imagen
crearRejilla();
function crearRejilla() {
//creamos el MC que contendrá las celdas que componen la rejilla
this.createEmptyMovieClip("rejilla",this.getNextHighestDepth());
nCeldas = 165;
cuentaRejillas = 0;
anchoCelda = 30;
altoCelda = 30;
posX = 0;
posY = 0;
//
for (var i:Number = 0; i < nCeldas; i++) {
rejilla.createEmptyMovieClip("celda" + i,rejilla.getNextHighestDepth());
rejilla["celda" + i].lineStyle(1,0x000000,100);
rejilla["celda" + i].moveTo(0,0);
rejilla["celda" + i].lineTo(anchoCelda,0);
rejilla["celda" + i].lineTo(anchoCelda,altoCelda);
rejilla["celda" + i].lineTo(0,altoCelda);
//las vamos colocando
rejilla["celda" + i]._x = posX;
rejilla["celda" + i]._y = posY;
posX = posX + 30;
cuentaRejillas++;
// si superan 15 celdas por linea pasamos a la siguente
if (cuentaRejillas == 15) {
cuentaRejillas = 0;
posX = 0;
posY = posY + 30;
}
}
/*con esto, sabremos en que cuadrante está localizado el banderín rojo de la foto(el nº 82)aunque se escale la película
lo señalaremos con un icono (aro amarillo) de la biblioteca*/
celdaPajaro = 82;
this.attachMovie("icono","icono",this.getNextHighestDepth());
icono._x = rejilla["celda" + celdaPajaro]._x;
icono._y = rejilla["celda" + celdaPajaro]._y;
/*
Hemos creado una función para que la foto y la rejilla se ajusten al ancho y alto de
la pantalla, naturalmente se tendrán que escalar y nuestro icono debería seguir señalando
el pájaro que se encuentra en la foto como hemos indicado en la funcion onResize(), donde
ajustamos las coordenadas de "icono" a las coordenadas de "celdaPajaro".
Pero esto no ocurre así, se podría solucionar incluyendo el icono en el MC de la rejilla
para que se escalase en conjunto, pero en este caso lo queremos fuera por diferentes razones.
La solución podría estar en conocer las coordenadas globales de "celdaPajaro" después de
redimensionar la ventana, pero no lo he conseguido ni con localToGlobal() aunque igual podría
estar ahí la solución.
Si alguien consigue como resolver este ejemplo le regalo el pájaro de la foto :P
A mi se me ha ocurrido esto para localizar un elemento en una foto, pero si existe una forma
mejor.. tiene toda mi atención :)
Un saludo,
Sergio.
*/
}
