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:
19 Comments »
RSS feed for comments on this post. TrackBack URI
Una idea sencilla, pero con un resultado espectacular.
Gran ejemplo, me ha sido muy util sobre todo para generar el movimiento de la panoramica.
Mil gracias.
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
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
[...] Pueden ver el post original AQUI. Pueden ver tambien este otro ejemplo de movimiento panorámico. En este caso utilizando MovieClips y máscaras. [...]
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
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.
lindo ejemplito, al inicio no pude hacerlo andar por un problema de referencias adentro de la clase PanoVR... gracais por compartir !
BuenÃÂsima clase, ya le voy a estar dando algún uso. Gracias por compartir!
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
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
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
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
@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
Si no les sale y en realidad han seguido paso a paso.
solo tienen que activar el linkage a los movieclip.
suerte!
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
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...
[...] Actionscript: Foto panorámica 360º en flash [...]
Al cabo de los 1000... una pregunta: cómo hacer para que la panorámica empiece a andar en el _X especificado ¿? (Estoy usando la versión con botones) el "setPosicion" me mueve la panorámica entera en el lienzo.
Excelente el tutorial, gracias.