A pedido de Nicolás Pisano, autor del sitio Postal Social, Profesor de Diseño y tipografía del Instituto Superior Aguas de la Cañada, me hace llegar la necesidad de este controlador para visualizar fotos panorámicas en 360º. Para empezar vale aclarar que el ejemplo es muy simple y en la web se encuentran disponibles muchos más ejemplos, pero como todo me gusta hacer las cosas por mi cuenta y usar el cerebelo para algo más que llevar pelo, aunque después del corte de cabello, por fin mi mamá pudo (18 años despues) decir “por fin te cortaste como un hombrecito…” pero bueno esa es otra cuestión y mucho más complicada que este AS.
En principio no hay nada de lo de siempre, un movieClipLoader, unos onEnterFrame, una carga de XML. Se planteo cargar la imagen y repetirla a modo que nos quede 2 imágenes. Luego se coloco una después de otra y se detecto la posición de ambas para que siempre estén juntas sea antes de una o después de la otra según en el sentido que se desplace. En el AS van a poder apreciar mejor el funcionamiento concreto.
Nota: estoy rindiendo así que la versión en AS3 se las debo para la semana que viene! ;)
-
//para cargar una img externa
-
var mcLoader:MovieClipLoader = new MovieClipLoader();
-
var escuchar:Object = new Object();
-
//por si necesitamos indicar un dominio ext
-
var DOMINIO:String = "";
-
//nuestro xml
-
var URLxml:String = "360.xml";
-
//variables nesarias...
-
var ancho:Number = 0;
-
var vel:Number = 0;
-
var miArray:Array = new Array();
-
var miXML:XML = new XML();
-
miXML.ignoreWhite = true;
-
//el famoso onLoad del xml (es mas lindo en AS3 trabajar con xml)
-
miXML.onLoad = function(ok) {
-
if (ok) {
-
miArray = this.firstChild;
-
ancho = Number(miArray.attributes.ancho);
-
init();
-
} else {
-
}
-
};
-
miXML.load(DOMINIO+URLxml);
-
//inicializamos los comportamientos
-
function init() {
-
for (var i:Number = 0; i<2; i++) {
-
//creamos los 2 contenedores
-
var temp:MovieClip = this.attachMovie("cont", "cont"+i, this.getNextHighestDepth());
-
temp.createEmptyMovieClip("int_mc",10);
-
//los acomodamos
-
temp._x = ancho*i;
-
//cargamos la misma imagen en los 2 contenedores
-
mcLoader.loadClip(DOMINIO+miArray.attributes.img,temp.int_mc);
-
//detectamos donde está el contenedor y si es necesario (a quien te hace acordar¿?) rotarlo
-
temp.onEnterFrame = function() {
-
this._x += vel;
-
if (this._x>ancho) {
-
this._x -= ancho*2;
-
}
-
if (this._x<ancho*-1) {
-
this._x += ancho*2;
-
}
-
};
-
}
-
//función encargada de detectar la posc. del mouse y velocidad de movimiento del cont.
-
this.onEnterFrame = function() {
-
vel = int(((this._xmouse-Stage.width/2)/-Stage.width)*10);
-
};
-
//imprimimos el campo de texto para el titulo
-
if (miArray.attributes.titulo != "") {
-
this.createTextField("titulo_txt",this.getNextHighestDepth(),0,0,10,10);
-
var textFormat:TextFormat = new TextFormat();
-
var aling:String = miArray.attributes.alingText;
-
titulo_txt.autoSize = true;
-
textFormat.font = "Arial";
-
textFormat.color = Number(miArray.attributes.colorFont);
-
textFormat.size = 10;
-
textFormat.rightMargin = 5;
-
textFormat.leftMargin = 5;
-
titulo_txt.text = miArray.attributes.titulo;
-
titulo_txt.background = true;
-
titulo_txt.backgroundColor = Number(miArray.attributes.colorBack);
-
titulo_txt.setTextFormat(textFormat);
-
//alineamos el campito
-
switch (aling) {
-
case "top-left" :
-
titulo_txt._x = 0;
-
titulo_txt._y = 0;
-
break;
-
case "top-right" :
-
titulo_txt._x = Stage.width-titulo_txt._width;
-
titulo_txt._y = 0;
-
break;
-
case "button-left" :
-
titulo_txt._x = 0;
-
titulo_txt._y = Stage.height-titulo_txt._height;
-
break;
-
case "button-right" :
-
titulo_txt._x = Stage.width-titulo_txt._width;
-
titulo_txt._y = Stage.height-titulo_txt._height;
-
break;
-
}
-
}
-
}
-
//estas son verduras (listeners) para la imagen cuando se carga,
-
//esto ya es figurita repetida, en otros tutos esta explicado como funciona
-
escuchar.onLoadInit = function(target:MovieClip) {
-
};
-
escuchar.onLoadStart = function(target:MovieClip) {
-
load_mc._x = (Stage.width/2)-(load_mc._width/2);
-
load_mc._y = (Stage.height/2)-(load_mc._height/2);
-
load_mc._visible = true;
-
};
-
escuchar.onLoadComplete = function(target:MovieClip, httpStatus:Number) {
-
load_mc._visible = false;
-
};
-
mcLoader.addListener(escuchar);
Así es el XML donde pasamos todos los parámetros
-
<360 titulo="Prueba LeoBaraldi" alingText="button-right" colorBack="0x000000" colorFont="0xFFFFFF" img="pano.jpg" ancho="2062"></360>
Los atributos del xml son muy simples pero por si las moscas explico:
titulo: Aquí colocas un titulo si quieres, sino lo hay el flash no imprime la caja de texto
alingText: Que posición se ubica la caja de texto (top-left - top-right - button-left - button-right)
colorBack: Color de fondo de la caja (valor hexadecimal) ejemplo: 0xFF0000 = rojo
colorFont: Color de la fuente
img: Url o nombre del archivo de imagen, puede ser jpg, png, gif o swf
ancho: Colocas el ancho de la imagen que vas a cargar
De mas esta decir que si quieres modificar las medidas del swf simplemente abre el fla, cambia las medidas publícalo y listo! no es necesario nada más!
26 octubre, 2009 at 7:35 pm
jejeje, cuanto tiempo ... y de casualidad caí en tu web :)
Leo... actualizate ya a AS3 jajaja
salu2!
28 octubre, 2009 at 3:24 pm
Hola che!!! si ya estamos usando as3, flex, air y flash lite a full! un abrazo estimado!
26 enero, 2010 at 10:48 am
Amigo Leo, estamos rediseñando nuestra web pero no somos diseñadores por lo que nos esta costando mucho, crees que en algún momento libre te podamos contar lo que hacemos y asi recibir algun consejo de tu parte...muchas gracias Eric