Cómo hacer un efecto 360 con Flash

29 de noviembre de 2011
Valoración del artículo:
Lo que vamos a explicar en este tutorial será como hacer un efecto 360 con el programa flash.
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

Para ello en primer lugar lo que debemos hacer es tener una foto panorámica y mediante el programa Photoshop debemos voltearla.

Para ello vamos a Menú/Abrir y elegimos la imagen panorámica.

Una vez abierta con el programa Photoshop vamos a voltearla, para ello pinchamos en Menú/Edición/Transformar/voltear horizontal.

Una vez hecho esto tendremos la imagen volteada y debemos guardar las dos imagnes, la inicial y la volteada.

El siguiente paso a realizar será abrir nuestro programa Flash, una vez abierto tendremos que crear un nuevo documento para ello debemos ir a Menú/Archivo/Nuevo/Documento de Flash.

A continuación lo que debemos hacer es darle a nuestro archivo Flash las dimensiones correctas, para ello pinchamos con el botón derecho encima del documento creado y elegimos la opción propiedades del documento y ponemos las siguientes dimensiones.

El ancho sería el tamaño que queramos que tenga la pélicula y el alto el tamaño de nuestra imagen, en nuestro caso, 550px por 300px.

Cuando ya le hemos dado las dimensiones apropiadas tenemos que ir a Menú/Insertar/Nuevo Símbolo.

Nos aparecerá una ventana emergente, y en la opción tipo debemos seleccionar clip de película y también tenemos que cambiar el nombre, esto es muy importante, nosotros lo hemos llamado pano1a, (ya que es el nombre que posteriormente recogerá el código que pongamos).

Una vez hecho esto el clip de película nos aparecerá en la biblioteca, pinchamos sobre el y vamos a Menú/Archivo/Importar/Importar a escenario, nos aparecerá una ventana emergente y tenemos que elegir la foto con la que queramos hacer este efecto.

Una vez que tenemos la foto debemos ir a propiedades que se encuentra abajo de la pantalla y en las coordenadas X e Y debemos darle el valor de 0.

A continuación debemos repetir los pasos anteriores, creando de nuevo un clip de película con las características anteriores pero con un nombre diferente, a este nosotros le hemos llamado pano1b.

Cuando ya lo tenemos creado debemos, al igual que antes, pinchar en este nuevo clip de película y darle a Menú/Archivo/Importar/Importar a escenario, ahora debemos elegir la otra imagen con la que queremos formar este efecto. y volvemos a darle los valores de 0 a las coordenadas X e Y.

Lo siguiente que tenemos que hacer es ir a la escena 1, cuando ya la tenemos seleccionada elegimos el fotograma 1.

En la escena debemos escribir el siguiente código.

 var pano = new PanoVR(this, "pano1a", "pano1b", 0, 0, 550, 300, 0.15);


MocieClip1, (en nuestro caso "pano1a"): Es el movieclip que contiene la primera mitad de la panorámica.
MocieClip2, (en nuestro caso "pano2a"): Es el movieclip que contiene la segunda mitad de la panorámica.
PosX, (en nuestro caso "0"): Posicion X donde colocaremos la panorámica.
PosY, (en nuestro caso "0"): Posicion Y donde colocaremos la panorámica.
Ancho, (en nuestro caso "550"): Ancho de la panorámica.
Alto, (en nuestro caso "300"): Alto de la panorámica.
Aceleracion, (en nuestro caso "0.15"): 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.

Una vez hecho esto tenemos que guardarlo Menú/Archivo/Guardar como, cuando ya esta guardado debemos publicarlo Menú/Archivo/Publicar

A continuación y por último debemos ir a Menú/Archivo/Nuevo nos aparecerá una ventana emergente y elegimos Archivo ActionScript, una vez abierto debemos copiar el siguiente código, y guardarlo en la misma carpeta donde hemos guardado el archivo Flash donde se encuentra la película.

Debemos guardarlo con el nombre PanoVR y la extensión .as, (ya que nuevamente, será el nombre que recogerá el códido).

El codigo que debemos pegar:

 class PlanoVR {
//
private var ruta:MovieClip;
private var clip:MovieClip;
private var marco:MovieClip;
private var mascara:MovieClip;
private var listener:Object;
private var prof:Number;
private var x:Number;
private var y:Number;
private var width:Number;
private var height:Number;
private var grosor:Number;
private var color:Number;
private var velocidad:Number;
private var aceleracion:Number;
//
//--CONSTRUCTOR------------------------------------
public function PlanoVR(queRuta:MovieClip, queClip:String) {
ruta = queRuta;
prof = ruta.getNextHighestDepth();
clip = ruta.clip = ruta.createEmptyMovieClip("plano", prof);
clip.attachMovie(queClip, queClip, 1);
listener = new Object();
//-- variables default -------
x = clip.x = 0;
y = clip.y = 0;
width = clip.width = 320;
height = clip.height = 240;
grosor = 1;
color = 0x000000;
velocidad = 15;
aceleracion = 0.15;
//-- inis --------------------
iniPosicion();
iniMascara();
iniMarco();
iniEvents();
}
//--INIS-----------------------------------------
private function iniPosicion() {
clip._x = x;
clip._y = y;
}
//--------------------------------------------------
private function iniMascara() {
prof = ruta.getNextHighestDepth();
mascara = ruta.createEmptyMovieClip("mask_mc", prof);
mascara.beginFill(0xFF0000);
mascara.lineStyle(1, 0x000000, 100);
mascara.moveTo(x, y);
mascara.lineTo(x + width, y);
mascara.lineTo(x + width, y + height);
mascara.lineTo(x, y + height);
mascara.lineTo(x, y);
mascara.endFill();
clip.setMask(mascara);
}
//--------------------------------------------------
private function iniMarco() {
prof = ruta.getNextHighestDepth();
marco = ruta.createEmptyMovieClip("marco_mc", prof);
marco.lineStyle(grosor, color, 100);
marco.moveTo(x, y);
marco.lineTo(x + width, y);
marco.lineTo(x + width, y + height);
marco.lineTo(x, y + height);
marco.lineTo(x, y);
}
//--------------------------------------------------
private function iniEvents() {
clip.velocidad = velocidad;
clip.aceleracion = aceleracion;
var plano:MovieClip = clip;
var mouseIsDown:Boolean = false;
//
listener.onMouseDown = function() {
mouseIsDown = true;
//controlamos que se esta dentro del area de la pano
if (_xmouse > plano.x & _xmouse < (plano.x + plano.width) & _ymouse > plano.y & _ymouse < (plano.y + plano.height)) {
plano.onEnterFrame = function() {
this.point2x = _xmouse;
this.point2y = _ymouse;
this.velx = (this.point2x - this.point1x) / this.velocidad * -1;
this.vely = (this.point2y - this.point1y) / this.velocidad * -1 / 2;
plano._x += plano.velx;
plano._y += plano.vely;
controlaTopes();
};
plano.point1x = _xmouse;
plano.point1y = _ymouse;
}
};
listener.onMouseUp = function() {
mouseIsDown = false;
movimientoInercia(plano);
};
listener.onMouseMove = function() {
//controlamos que se esta dentro del area de la pano
if (_xmouse > plano.x & _xmouse < (plano.x + plano.width) & _ymouse > plano.y & _ymouse < (plano.y + plano.height)) {
if (mouseIsDown == false) {
if (_xmouse > plano.x & _xmouse < (plano.x + plano.width / 4)) {
//-- izquierda
plano.onEnterFrame = movimientoAutoH;
plano.point1x = plano.x + plano.width / 4;
} else if (_xmouse > (plano.x + plano.width - plano.width / 4) & _xmouse < (plano.x + plano.width)) {
//-- derecha
plano.onEnterFrame = movimientoAutoH;
plano.point1x = plano.x + plano.width - (plano.width / 4);
} else if (_ymouse > plano.y & _ymouse < (plano.y + plano.height / 4)) {
//-- arriba
plano.onEnterFrame = movimientoAutoV;
plano.point1y = plano.y + (plano.height / 4);
} else if (_ymouse > (plano.y + plano.height - plano.height / 4) & _ymouse < (plano.y + plano.height)) {
//-- abajo
plano.onEnterFrame = movimientoAutoV;
plano.point1y = plano.y + plano.height - (plano.height / 4);
} else {
//estamos fuera del area roll
movimientoInercia(plano);
}
}
} else {
//estamos fuera de la pano
movimientoInercia(plano);
}
};
Mouse.addListener(listener);
//
function controlaTopes() {
if (plano._x > plano.x) {
plano._x = plano.x;
} else if (plano._x < (plano.x - (plano._width - plano.width))) {
plano._x = plano.x - (plano._width - plano.width);
}
if (plano._y > plano.y) {
plano._y = plano.y;
} else if (plano._y < (plano.y - (plano._height - plano.height))) {
plano._y = plano.y - (plano._height - plano.height);
}
}
function movimientoInercia(quePano) {
var plano:MovieClip = quePano;
plano.onEnterFrame = function() {
var ac:Number = plano.velx * plano.aceleracion;
plano.velx -= ac;
plano._x += plano.velx;
if (ac < 0.01 & ac > -0.01) {
delete plano.onEnterFrame;
}
controlaTopes();
};
}
function movimientoAutoH() {
this.point2x = _xmouse;
this.velx = (this.point2x - this.point1x) / this.velocidad * -1;
plano._x += plano.velx;
controlaTopes();
}
function movimientoAutoV() {
this.point2y = _ymouse;
this.vely = (this.point2y - this.point1y) / this.velocidad * -1;
plano._y += plano.vely;
controlaTopes();
}
}
//end iniEvents
//--------------------------------------------------
private function update() {
iniPosicion();
removeMovieClip(mascara);
iniMascara();
removeMovieClip(marco);
iniMarco();
iniEvents();
}
//
//--SETTERS-----------------------------------------
public function setPosicion(queX:Number, queY:Number) {
x = clip.x = queX;
y = clip.y = queY;
update();
}
//--------------------------------------------------
public function setDimension(queW:Number, queH:Number) {
width = clip.width = queW;
height = clip.height = queH;
update();
}
//--------------------------------------------------
public function setMarco(queGrosor, queColor:Number) {
grosor = queGrosor;
color = queColor;
update();
}
//--------------------------------------------------
public function setVelocidad(queVelocidad:Number) {
velocidad = clip.velocidad = queVelocidad;
update();
}
//--------------------------------------------------
public function setAceleracion(queAceleracion:Number) {
aceleracion = clip.aceleracion = queAceleracion;
update();
}
//--------------------------------------------------
public function setPlano(queClip:String) {
removeMovieClip(clip.plano);
clip.attachMovie(queClip, queClip, 1);
update();
}
//--------------------------------------------------
public function clear() {
removeMovieClip(clip);
removeMovieClip(mascara);
}
//--------------------------------------------------
//--------------------------------------------------
}

Una vez hecho esto ya tenemos terminado nuestro efecto 360, para poder ver el efecto final, tenemos que ir a la carpeta donde hemos guardado el documento y hacer doble click sobre el archivo .swf que hemos publicado anteriormente.

Si habéis seguido bien los pasos tenéis que haber conseguido un efecto con el que os dejamos a continuación, (pinchad con el ratón sobre la foto, para moverla a la izquierda o a la derecha)



Pincha aquí para descargar las fuentes del proyecto.

Comentarios

Los comentarios de los visitantes son para ampliar la
información del artículo. Cualquiera puede participar.

Añadir un comentario al artículo Publicar un comentario del artículo

Se muestra un comentario revisado

 no sirve
08/3/12 

Comentario de daniel herrera:

no funciona y el link esta roto, pongan el flash en otro lado si aun lo tienen

Desarrollomultimedia:

Hemos modificado el enlace, para que funcione la descarga, un saludo!!


Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos
interesantes que se hayan enviado recientemente.


Se han encontrado 2 comentarios sin revisar




El autor
Guía
Categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...