Foto panorámica 360º en flash
Esta es una clase que te permite generar una panorámica interactiva de una fotografía en Flash.
Sólo se necesita la fotografía continua de la panorámica y usar este codigo en cualquier pelicula para añadir una visión de 360º controlada por el usuario.
He aquí un ejemplo:
[Presiona y arrastra en la imágen]
Coloca este código en un nuevo archivo de texto llamado "PanoVR.as" y pon ese archivo en la misma carpeta de tu .FLA
{
var ruta:MovieClip;
var clip1:MovieClip;
var clip2:MovieClip;
var marco:MovieClip;
var mascara:MovieClip;
var mascara2:MovieClip;
var prof:Number;
var x:Number;
var y:Number;
var aceleracion:Number;
//
//------------------------------------
function PanoVR(queRuta:MovieClip,queClip1:String,queClip2:String,queX:Number,queY:Number,queW:Number,queH:Number,queAceleracion)
{
ruta = queRuta;
prof = ruta.getNextHighestDepth();
clip1 = ruta.clip1 = ruta.attachMovie(queClip1,queClip1,prof);
clip2 = ruta.clip2 = ruta.attachMovie(queClip2,queClip2,prof + 1);
//inis
iniPosicion(queX,queY);
iniMascara(queX,queY,queH,queW);
iniMarco(queX,queY,queH,queW);
iniEvents(queAceleracion);
}
//------------------------------------
function iniPosicion(queX,queY)
{
x = clip1.x = clip2.x = queX;
y = clip1.y = clip2.y = queY;
clip1._x = x;
clip1._y = y;
clip2._x = x + clip1._width;
clip2._y = y;
}
//------------------------------------
function iniMascara(queX,queY,queH,queW)
{
prof = ruta.getNextHighestDepth();
mascara = ruta.createEmptyMovieClip("mask_mc",prof);
mascara.beginFill(0xFF0000);
mascara.lineStyle(1,0x000000,100);
mascara.moveTo(queX,queY);
mascara.lineTo(queX + queW,queY);
mascara.lineTo(queX + queW,queY + queH);
mascara.lineTo(queX,queY + queH);
mascara.lineTo(queX,queY);
mascara.endFill();
mascara2 = mascara.duplicateMovieClip("mask2_mc",prof + 1);
clip1.setMask(mascara);
clip2.setMask(mascara2);
}
//------------------------------------
function iniMarco(queX,queY,queH,queW)
{
prof = ruta.getNextHighestDepth();
marco = ruta.createEmptyMovieClip("marco_mc",prof);
marco.lineStyle(1,0x000000,100);
marco.moveTo(queX,queY);
marco.lineTo(queX + queW,queY);
marco.lineTo(queX + queW,queY + queH);
marco.lineTo(queX,queY + queH);
marco.lineTo(queX,queY);
}
//------------------------------------
function iniEvents(queAceleracion)
{
clip1.useHandCursor = false;
clip2.useHandCursor = false;
aceleracion = clip1.ac = clip2.ac = queAceleracion;
//--
clip1.onPress=clip2.onPress=function ()
{
var pano1:MovieClip = this;
var pano2:MovieClip = (this == this._parent.clip1) ? this._parent.clip2 : this._parent.clip1;
this.onEnterFrame = function()
{
this.point2 = _xmouse;
this.vel = (this.point2 - this.point1) / 15 * -1;
pano1._x += pano1.vel;
enlacaPanos(pano1, pano2);
};
this.point1 = _xmouse;
};
clip1.onRelease=clip1.onReleaseOutside=clip2.onRelease=clip2.onReleaseOutside=function ()
{
movimientoInercia(this);
};
//--
function enlacaPanos(pano1,pano2)
{
if (pano1._x<pano1.x)
{
pano2._x=pano1._x+pano1._width;
}
else
{
pano2._x=pano1._x-pano1._width;
}
//vuelta
if (pano1._x<pano1.x&pano2._x<pano2.x)
{
pano1._x=pano2._x+pano2._width;
}
else if (pano1._x>pano1.x&pano2._x>pano2.x)
{
pano1._x=pano2._x-pano2._width;
}
}
function reCapturaPunto1()
{
this.point1=_xmouse;
}
function movimientoInercia(quePano)
{
var pano1:MovieClip=quePano;
var pano2:MovieClip=pano1==pano1._parent.clip1?pano1._parent.clip2:pano1._parent.clip1;
pano1.onEnterFrame=function()
{
var ac:Number = pano1.vel * pano1.ac;
pano1.vel -= ac;
pano1._x += pano1.vel;
if (ac <0.01 & ac> -0.01)
{
delete pano1.onEnterFrame;
}
enlacaPanos(pano1, pano2);
};
}
}
}
Para usarlo, en tu .FLA colocarías algo como esto. En el primer keyframe de tu animación:
Los parámetros que le pasamos són:
MocieClip1: Es el movieclip que contiene la primera mitad de la panorámica
MocieClip2: Es el movieclip que contiene la segunda mitad de la panorámica
posX: Posicion X donde colocaremos la panorámica
posY: Posicion Y donde colocaremos la panorámica
ancho: Ancho de la panorámica
alto: Alto de la panorámica
aceleracion: Este valor hace que al soltar el botón del mouse la panorámica continue con un poco de movimiento por inercia. La velocidad a la que frene depende de este valor. El rango de este valor de 1 > 0 (aunque con valores más altos de 0.5 casi no se visualiza diferencia)
Para un movimiento con mucha inercia utilizaremos un valor 0.05
Para un movimiento con poca inercia 0.3
Si no queremos ningun tipo de inercia, valor 0
Post relacinonados:
November 30th, 1999 at 12:00 am
Una idea sencilla, pero con un resultado espectacular.
November 30th, 1999 at 12:00 am
Gran ejemplo, me ha sido muy util sobre todo para generar el movimiento de la panoramica.
Mil gracias.
November 30th, 1999 at 12:00 am
creo que seria mas intuitivo(y mas fácil aun) si en ves de pinchar y arrastrar tuviese un puntero en la mitad de la imagen y que tomase la posición del mouse para mover la imagen sin tener que pinchar nada
November 30th, 1999 at 12:00 am
hola esta muy cool lo que hiciste con el panorama, ahora mi duda es por ejemplo los panoramas tienen hotspots de link como haria en flash los botones o como los programo... por que lo he hecho de la manera normal y no los reconoce
November 30th, 1999 at 12:00 am
[...] Pueden ver el post original AQUI. Pueden ver tambien este otro ejemplo de movimiento panorámico. En este caso utilizando MovieClips y máscaras. [...]
November 30th, 1999 at 12:00 am
esta bueno el ejemplo pero seria bueno una media explicacion de donde colorar por completo las imagenes y todo. Pues digo que otros principiantes como yo les costara ubicarse.
Pero de que esta util esta util
November 30th, 1999 at 12:00 am
como puedo lograrlo sin tener que presionar, es decir con el evemto del mouse, seria sustituir on press por onmouseover? y si pueden enviarme el archivo .fla para verlo mejor. gracias.
November 30th, 1999 at 12:00 am
lindo ejemplito, al inicio no pude hacerlo andar por un problema de referencias adentro de la clase PanoVR... gracais por compartir !
November 30th, 1999 at 12:00 am
BuenÃsima clase, ya le voy a estar dando algún uso. Gracias por compartir!
November 30th, 1999 at 12:00 am
Muchas gracias por este tutorial, solo me queda una pregunta, cual es la manera de poner un icono en alguna de las esquinas?. He tratado pero no me resulta
February 16th, 2009 at 11:14 am
Hola Guillermo, primeramente te felicito por la enorme capcidad de programación y diseño que tienes en Flash, y lo grato detodo esque lo compartes con todo el mundo de manera abierta.
La siguiente es una duda sobre tu clase para hacer panorámicas de 360°, y es la siguiente:
Al duplicar los movie clips "pano1a y pano1b" a "pano2a y pano2b" y luego se renombra el action script del primer fotograma a:
[b]var pano = new PanoVR(this, "pano2a", "pano2b", 0, 0, 450, 240, 0.15);[/b]
el .swf generado ya no visualiza el panorama, solo aparece un fondo rojo en todo el swf.
Mi consulta es si no podemos usar moviclips con un diferente nombre?
Espero puedas ayudarme
Gracias de antemano
March 2nd, 2009 at 11:07 pm
Hola..
Muchas gracias por compartir tu amplio conocimiento con nosotros que andamos aprendiendo!
Quiero preguntarte porque en este ejercicio me reulta una pantalla roja en mi pelicula .swf? En que parte estoy haciando algo mal?
Te agradezco mucho la respuesta para poder lograr este primer paso..
Un saludo
Miguel Perez
March 2nd, 2009 at 11:25 pm
Hola, antes que nada te agradezco el compartir tus conocimientos con nosotros que estamos aprendiendo, eso se aprecia mucho...
Fijate que tratando de realizar este ejercicio del panorama 360 todo iba muy bien hasta que en la película final .swf me sale toda roja, y no veo como arreglarlo, que hice mal? por lo que veo en las aportaciones es un error algo común..
Que puedo hacer? mucho agradezco tu ayuda para dar este primer paso...
Gracias
March 3rd, 2009 at 12:27 pm
@Miguel Perez:
Hola, pues no sabría decirte por que te sale en rojo.
Hace tiempo que no toco esa clase.
Te paso un ejemplo en .fla ya montado y funcional.
http://www.codigoactionscript.org/files/panoVR.zip
A ver si te sirve
Saludos
June 3rd, 2009 at 4:54 pm
Si no les sale y en realidad han seguido paso a paso.
solo tienen que activar el linkage a los movieclip.
suerte!
June 25th, 2009 at 2:24 pm
Hola, mi consulta es la siguiente:
segui el tutorial desde otra pagina sobre el 360 y perfecto, tanto vertical como horizontal, mi problema viene a la hora de hacer que trabaje tambien en diagonal hacia arriba y abajo, he intentado con el .as pero no me sale, agradeceria me puedas orientar un poquito para poder hacerlo...
Muchas gracias zguillez... un maestro
saludos
El Checheno
July 29th, 2009 at 11:54 am
Hola, un post muy bueno y que me ha servido de mucho. Hay alguien que dice que le sale en rojo, eso es por que publica con un flash player antiguo. En configuración tienen que poner el último (9 o 10). Por otra parte tengo un problema con la precarga de la pelicula y es que no me la hace de ninguna manera. Ya tuve problemas para cambiarle el grafico de mouse y al final lo conseguí, pero la precarga no hay manera, a ver si me puedes echar una mano.
Gracias y un saludo...
August 10th, 2009 at 4:06 am
[...] Actionscript: Foto panorámica 360º en flash [...]