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
- class PanoVR
- {
- 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:
- var pano = new PanoVR(this, "pano1a", "pano1b", 0, 0, 450, 240, 0.15);
Los parámetros que le pasamos són:
- var pano = new PanoVR(this, MovieClip1, MovieClip2, posX, posY, ancho, alto, aceleracion);
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
Compártelo:
Visto 25.188 veces
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.
Hola Guillermo… espectacular este codigo. Te felicito !!! Ya lo hice pero no he podido hacer funcionar botones dentro del area. Me podrías por favor ayudar con esto? Como podría hacer funcionar los links?
Muchas gracias !!!
Excelente la clase…. pero tengo el mismo problema de muchos y es con los botones. Nos podrías asesorar en como hacer que funcionen ?
Muchas gracias
Hola!! queria saber si alguien me puede decir como se hace lo mismo pero en 270° yo quiero que llegue hasta la punta y vuelva pero arrastrando como en la 360° que pusiste! se puede cambiar los valores de este flash para que me quede ?? Muchas gracias !!
Saludos
hola, alguien sabe cómo introducir botones (puntos calientes) fuera de la clase que on rollover hagan determinadas acciones?? o sea, cómo hacer que la panorámica se quede en una capa inferior y por arriba pueda haber botones con distintas funcionalidades (+información, moverse a, etc…)
gracias por la ayuda!