Comunidad de diseño web y desarrollo en internet online

panorámica interactiva que se desplaza con el movimiento del mouse.

Citar            
MensajeEscrito el 09 Mar 2011 01:25 am
He visto que muchos han estado buscando cómo hacer que una panorámica avance con el movimiento del mouse en la dirección deseada. TESEO hace como 4 años publicó un excelente tutorial de como lograr el movimiento en una foto 360 grados. A raiz de ello, muchos empezaron a preguntar cómo hacer que se pueda interactuar con esa imagen, es decir, básicamente colocar botones activos que a medida que se vaya moviendo la panoramica estos botones funcionen y se animen correctamente. Con la forma de hacer la 360 no era posible ya que solo trabajaba con Bitmaps o MC que no permitían interacción.

Bueno en todo caso la forma de hacerlo básicamente está definida por el estilo para crear un Parallax Gallery es decir una animación tipo videoJuego con varias capas que se desplazan logrando el efecto de perspectiva 3D en una Escena 2D.

He aquí el código que sirve para hacer esas maromas como galerias de fotos, o simulación de espacios con difernetes capas e interacción con los objetos de ese espacio a medida que se mueve el fondo, etc...

Téngase en cuenta que "front_mc" es la instancia de un MC que contiene la imagen que viene en frente, o la capa delantera de nuestra panorámica y "back_mc" es el fondo. Se puede hacer con un solo plano si no se desea añadir dos planos a la panorámica. (como es el caso del ejemplo que publico abajo. Esto es para AC2.

Código ActionScript :


stageWidth = Stage.width;
speed1 = 20;
speed2 = 19;
mc1Width = front_mc._width;
mc2Width = back_mc._width;
mc1X = front_mc._x;
mc2X = back_mc._x;

lock_scroll = false;
_root.onEnterFrame = function () {
   if (!lock_scroll)
      scroll_mc();
}

function scroll_mc() {
   var xdist = _xmouse-(stageWidth/2);
   mc1X += -xdist/speed1;
   mc2X += -xdist/speed2;
   if (mc1X>=0) {
      mc1X = 0;
   }
   if (mc1X<=stageWidth-mc1Width) {
      mc1X = stageWidth-mc1Width;
   }
   if (mc2X>=0) {
      mc2X = 0;
   }
   if (mc2X<=stageWidth-mc2Width) {
      mc2X = stageWidth-mc2Width;
   }
   setProperty("front_mc", _x, mc1X);
   setProperty("back_mc", _x, mc2X);
}

//create an empty mc container for content to display
createEmptyMovieClip("content_box", 200);
content_box._x = 195;
content_box._y = 92;



Listo, luego de esto se pueden hacer muchas cosas.. basta soñar para que esas cosas salgan a flote..

Acá está el ejemplo:


Por NEOG

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 09 Mar 2011 07:59 am
Lo siento, ya no pasamos a portada las cosas hechas en Actionscript 1 o 2. AS3 lleva ya seis años en el mercado.

Lo muevo a aportes.

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 09 Mar 2011 05:48 pm
hey es un buen aporte, pásalo a AS3 y seras feliz!

Por jpcw

Claber

1715 de clabLevel

1 tutorial

Genero:Masculino  

AlgoritmicBrainDesigner

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.