Home » Avanzado »Class »Tutoriales » Currently Reading:

Foto panorámica 360º en flash

octubre 1, 2006 Avanzado, Class, Tutoriales 23 Comments
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

  1. class PanoVR
  2. {
  3.     var ruta:MovieClip;
  4.     var clip1:MovieClip;
  5.     var clip2:MovieClip;
  6.     var marco:MovieClip;
  7.     var mascara:MovieClip;
  8.     var mascara2:MovieClip;
  9.     var prof:Number;
  10.     var x:Number;
  11.     var y:Number;
  12.     var aceleracion:Number;
  13.     //
  14.     //------------------------------------
  15.     function PanoVR(queRuta:MovieClip,queClip1:String,queClip2:String,queX:Number,queY:Number,queW:Number,queH:Number,queAceleracion)
  16.     {
  17.         ruta = queRuta;
  18.         prof = ruta.getNextHighestDepth();
  19.         clip1 = ruta.clip1 = ruta.attachMovie(queClip1,queClip1,prof);
  20.         clip2 = ruta.clip2 = ruta.attachMovie(queClip2,queClip2,prof + 1);
  21.         //inis
  22.         iniPosicion(queX,queY);
  23.         iniMascara(queX,queY,queH,queW);
  24.         iniMarco(queX,queY,queH,queW);
  25.         iniEvents(queAceleracion);
  26.     }
  27.     //------------------------------------
  28.     function iniPosicion(queX,queY)
  29.     {
  30.         x = clip1.x = clip2.x = queX;
  31.         y = clip1.y = clip2.y = queY;
  32.         clip1._x = x;
  33.         clip1._y = y;
  34.         clip2._x = x + clip1._width;
  35.         clip2._y = y;
  36.     }
  37.     //------------------------------------
  38.     function iniMascara(queX,queY,queH,queW)
  39.     {
  40.         prof = ruta.getNextHighestDepth();
  41.         mascara = ruta.createEmptyMovieClip("mask_mc",prof);
  42.         mascara.beginFill(0xFF0000);
  43.         mascara.lineStyle(1,0x000000,100);
  44.         mascara.moveTo(queX,queY);
  45.         mascara.lineTo(queX + queW,queY);
  46.         mascara.lineTo(queX + queW,queY + queH);
  47.         mascara.lineTo(queX,queY + queH);
  48.         mascara.lineTo(queX,queY);
  49.         mascara.endFill();
  50.         mascara2 = mascara.duplicateMovieClip("mask2_mc",prof + 1);
  51.         clip1.setMask(mascara);
  52.         clip2.setMask(mascara2);
  53.     }
  54.     //------------------------------------
  55.     function iniMarco(queX,queY,queH,queW)
  56.     {
  57.         prof = ruta.getNextHighestDepth();
  58.         marco = ruta.createEmptyMovieClip("marco_mc",prof);
  59.         marco.lineStyle(1,0x000000,100);
  60.         marco.moveTo(queX,queY);
  61.         marco.lineTo(queX + queW,queY);
  62.         marco.lineTo(queX + queW,queY + queH);
  63.         marco.lineTo(queX,queY + queH);
  64.         marco.lineTo(queX,queY);
  65.     }
  66.     //------------------------------------
  67.     function iniEvents(queAceleracion)
  68.     {
  69.         clip1.useHandCursor = false;
  70.         clip2.useHandCursor = false;
  71.         aceleracion = clip1.ac = clip2.ac = queAceleracion;
  72.         //--
  73.         clip1.onPress=clip2.onPress=function ()
  74.         {
  75.             var pano1:MovieClip = this;
  76.             var pano2:MovieClip = (this == this._parent.clip1) ? this._parent.clip2 : this._parent.clip1;
  77.             this.onEnterFrame = function()
  78.             {
  79.                 this.point2 = _xmouse;
  80.                 this.vel = (this.point2 - this.point1) / 15 * -1;
  81.                 pano1._x += pano1.vel;
  82.                 enlacaPanos(pano1, pano2);
  83.             };
  84.             this.point1 = _xmouse;
  85.         };
  86.         clip1.onRelease=clip1.onReleaseOutside=clip2.onRelease=clip2.onReleaseOutside=function ()
  87.         {
  88.             movimientoInercia(this);
  89.         };
  90.         //--
  91.         function enlacaPanos(pano1,pano2)
  92.         {
  93.             if (pano1._x<pano1.x)
  94.             {
  95.                 pano2._x=pano1._x+pano1._width;
  96.             }
  97.             else
  98.             {
  99.                 pano2._x=pano1._x-pano1._width;
  100.             }
  101.             //vuelta
  102.             if (pano1._x<pano1.x&pano2._x<pano2.x)
  103.             {
  104.                 pano1._x=pano2._x+pano2._width;
  105.             }
  106.             else if (pano1._x>pano1.x&pano2._x>pano2.x)
  107.             {
  108.                 pano1._x=pano2._x-pano2._width;
  109.             }
  110.         }
  111.         function reCapturaPunto1()
  112.         {
  113.             this.point1=_xmouse;
  114.         }
  115.         function movimientoInercia(quePano)
  116.         {
  117.             var pano1:MovieClip=quePano;
  118.             var pano2:MovieClip=pano1==pano1._parent.clip1?pano1._parent.clip2:pano1._parent.clip1;
  119.             pano1.onEnterFrame=function()
  120.             {
  121.                 var ac:Number = pano1.vel * pano1.ac;
  122.                 pano1.vel -= ac;
  123.                 pano1._x += pano1.vel;
  124.                 if (ac < 0.01 & ac > -0.01)
  125.                 {
  126.                     delete pano1.onEnterFrame;
  127.                 }
  128.                 enlacaPanos(pano1, pano2);
  129.             };
  130.         }
  131.     }
  132. }

Para usarlo, en tu .FLA colocarías algo como esto. En el primer keyframe de tu animación:

  1. var pano = new PanoVR(this, "pano1a", "pano1b", 0, 0, 450, 240, 0.15);

Los parámetros que le pasamos són:

  1. 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:

Foto panorámica 360º en flash
Visto 20.399 veces

Currently there are "23 comments" on this Article:

  1. Guti dice:

    Una idea sencilla, pero con un resultado espectacular.

  2. kassel dice:

    Gran ejemplo, me ha sido muy util sobre todo para generar el movimiento de la panoramica.

    Mil gracias.

  3. inyaka dice:

    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

  4. rayo_reloaded dice:

    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

  5. […] Pueden ver el post original AQUI. Pueden ver tambien este otro ejemplo de movimiento panorámico. En este caso utilizando MovieClips y máscaras. […]

  6. Mauricio Pacheco dice:

    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

  7. johnathan dice:

    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.

  8. dan dice:

    lindo ejemplito, al inicio no pude hacerlo andar por un problema de referencias adentro de la clase PanoVR… gracais por compartir !

  9. Buenísima clase, ya le voy a estar dando algún uso. Gracias por compartir!

  10. Alejandro dice:

    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

  11. Bytito dice:

    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

  12. Miguel Perez dice:

    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

  13. MIguel Perez dice:

    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

  14. admin dice:

    @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

  15. Luis Alonso dice:

    Si no les sale y en realidad han seguido paso a paso.
    solo tienen que activar el linkage a los movieclip.
    suerte!

  16. checheno dice:

    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

  17. I.Sanchez dice:

    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…

  18. Juan M. dice:

    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.

  19. Francisco M. dice:

    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 !!!

  20. luis f dice:

    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

  21. Carolina dice:

    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

  22. maria dice:

    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!

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com