Foto Panoramica 360º usando bitmapData en Flash 8

Este prototype (pan360) efectúa un movimiento continuo sobre una imagen y funciona sobre el raíz o cualquier MovieClip que tengamos, pudiendo asimismo poner las instancias pan360 que deseemos dentro del mismo. Necesitas una imagen panorámica y automáticamente, el código hará que gire en efecto de 360 grados dependiendo de donde coloques el mouse.

Si usamos una imagen panorámica obtendremos un movimiento continuo en ambos sentidos dependiendo de la posición del ratón dentro de la imagen. Utiliza la clase bitmapData de flash 8 y concretamente la rutina más rápida: copyPixels, siendo mucho más eficaz y simple que el uso de MC´s con máscaras.

Para funcionar hay que llamarla con 2 parámetros, en nombre de la imagen a cargar y el ancho que deseemos de visor. Siempre podremos escalar, posicionar en x e y, o rotar el clip resultante que tendrá como nombre panN siendo N además el nivel de dicho panN.

Código :

import flash.display.*;
import flash.geom.*;
// pasar el nombre de vinculación de la imagen y el ancho del visor.
MovieClip.prototype.pan360 = function(imagen,w){
   c = this.getNextHighestDepth();
   this = this.createEmptyMovieClip("pan"+c,c);
   this.img = BitmapData.loadBitmap(imagen);
   this.tmp = new BitmapData(w, this.img.height, true, 0);
   this.attachBitmap(this.tmp, 1, "auto", true);
   this.tmp.copyPixels(this.img, this.tmp.rectangle,null);
   this.v = 0;
   this.onRollOver = function() {
      with(this) {
         this.onEnterFrame = function () {
            wa = img.width;
            v = Math.floor((v+(this._xmouse-tmp.width/2)/15)%wa);
            tmp.copyPixels(img, new Rectangle(v, 0, wa, img.height),null);
            tmp.copyPixels(img, new Rectangle(v+wa-2*wa*(v>0), 0, wa, img.height), null);
         }
      }
   }
   this.onRollOut = function() {delete this.onEnterFrame;}
}

Veamos algunos ejemplos de llamada:

• Instancia en el raiz y con una imagen llamada (en este caso) barra como nombre de vinculación en la biblioteca:
  Simplemente llamamos directamente a la función con el ancho de visionado que deseemos:

Código :

pan360("barra",400);
pan360("pista",400);
pan1._y=200;

Los MC resultantes son pan0 y pan1. Los podremos escalar, cambiar de posición, etc. Este código genera este EJEMPLO:

• Sobre un contenedor( cualquier MC) y colocándo en el uno o varios pan:

Código :

contenedor= createEmptyMovieClip("cont",this.getNextHighestDepth());
contenedor.pan360("barra",700);
contenedor.pan360("pista",500);
contenedor.pan1._xscale = contenedor.pan1._yscale = 40;
contenedor.pan1._x = contenedor.pan1._y =160;
contenedor.pan0._xscale = contenedor.pan0._yscale = 35;
contenedor.pan0._x =150;
contenedor.pan0._rotation =90;

Este código genera este otro EJEMPLO:

Solo hay que tener siempre en cuenta que lo que mandamos a la función es una imagen, ya sea cargando completamente y asignado una imagen externa o vinculando una imagen desde la biblioteca.

• Si queremos que el pan360 lo haga un MovieClip, crearemos un bitmap y le dibujaremos el MC con el método draw previamente antes de llamar a la función:
  Estando la imagen en un MC llamado, por ejemplo, foto_mc:

Código :

bitTemp = new BitmapData(foto_mc._width, foto_mc._height, true, 0);
bitTemp.draw( foto_mc);
pan360(bitTemp,300);

Nota: La velocidad se puede cambiar aumentando o disminuyendo el valor 15 dentro de esta linea:
v = Math.floor((v+(this._xmouse-tmp.width/2)/15)%wa);
...o si se desea se puede colocar también como parámetro de la función.

 

Tweet