asd

27

Jun

Visor de fotos panorámicas 360º AS2

Publicado por: LeoBaraldi

A pedido de Nicolás Pisano, autor del sitio Postal Social, Profesor de Diseño y tipografía del Instituto Superior Aguas de la Cañada, me hace llegar la necesidad de este controlador para visualizar fotos panorámicas en 360º. Para empezar vale aclarar que el ejemplo es muy simple y en la web se encuentran disponibles muchos más ejemplos, pero como todo me gusta hacer las cosas por mi cuenta y usar el cerebelo para algo más que llevar pelo, aunque después del corte de cabello, por fin mi mamá pudo (18 años despues) decir “por fin te cortaste como un hombrecito…” pero bueno esa es otra cuestión y mucho más complicada que este AS.

En principio no hay nada de lo de siempre, un movieClipLoader, unos onEnterFrame, una carga de XML. Se planteo cargar la imagen y repetirla a modo que nos quede 2 imágenes. Luego se coloco una después de otra y se detecto la posición de ambas para que siempre estén juntas sea antes de una o después de la otra según en el sentido que se desplace. En el AS van a poder apreciar mejor el funcionamiento concreto.
Nota: estoy rindiendo así que la versión en AS3 se las debo para la semana que viene! ;)

Clic para ver Texto Plano
Actionscript:
  1. //para cargar una img externa
  2. var mcLoader:MovieClipLoader = new MovieClipLoader();
  3. var escuchar:Object = new Object();
  4. //por si necesitamos indicar un dominio ext
  5. var DOMINIO:String = "";
  6. //nuestro xml
  7. var URLxml:String = "360.xml";
  8. //variables nesarias...
  9. var ancho:Number = 0;
  10. var vel:Number = 0;
  11. var miArray:Array = new Array();
  12. var miXML:XML = new XML();
  13. miXML.ignoreWhite = true;
  14. //el famoso onLoad del xml (es mas lindo en AS3 trabajar con xml)
  15. miXML.onLoad = function(ok) {
  16.     if (ok) {
  17.         miArray = this.firstChild;
  18.         ancho = Number(miArray.attributes.ancho);
  19.         init();
  20.     } else {
  21.     }
  22. };
  23. miXML.load(DOMINIO+URLxml);
  24. //inicializamos los comportamientos
  25. function init() {
  26.     for (var i:Number = 0; i<2; i++) {
  27.         //creamos los 2 contenedores
  28.         var temp:MovieClip = this.attachMovie("cont", "cont"+i, this.getNextHighestDepth());
  29.         temp.createEmptyMovieClip("int_mc",10);
  30.         //los acomodamos
  31.         temp._x = ancho*i;
  32.         //cargamos la misma imagen en los 2 contenedores
  33.         mcLoader.loadClip(DOMINIO+miArray.attributes.img,temp.int_mc);
  34.         //detectamos donde está el contenedor y si es necesario (a quien te hace acordar¿?) rotarlo
  35.         temp.onEnterFrame = function() {
  36.             this._x += vel;
  37.             if (this._x>ancho) {
  38.                 this._x -= ancho*2;
  39.             }
  40.             if (this._x<ancho*-1) {
  41.                 this._x += ancho*2;
  42.             }
  43.         };
  44.     }
  45.     //función encargada de detectar la posc. del mouse y velocidad de movimiento del cont.
  46.     this.onEnterFrame = function() {
  47.         vel = int(((this._xmouse-Stage.width/2)/-Stage.width)*10);
  48.     };
  49.     //imprimimos el campo de texto para el titulo
  50.     if (miArray.attributes.titulo != "") {
  51.         this.createTextField("titulo_txt",this.getNextHighestDepth(),0,0,10,10);
  52.         var textFormat:TextFormat = new TextFormat();
  53.         var aling:String = miArray.attributes.alingText;
  54.         titulo_txt.autoSize = true;
  55.         textFormat.font = "Arial";
  56.         textFormat.color = Number(miArray.attributes.colorFont);
  57.         textFormat.size = 10;
  58.         textFormat.rightMargin = 5;
  59.         textFormat.leftMargin = 5;
  60.         titulo_txt.text = miArray.attributes.titulo;
  61.         titulo_txt.background = true;
  62.         titulo_txt.backgroundColor = Number(miArray.attributes.colorBack);
  63.         titulo_txt.setTextFormat(textFormat);
  64.         //alineamos el campito
  65.         switch (aling) {
  66.             case "top-left" :
  67.                 titulo_txt._x = 0;
  68.                 titulo_txt._y = 0;
  69.                 break;
  70.             case "top-right" :
  71.                 titulo_txt._x = Stage.width-titulo_txt._width;
  72.                 titulo_txt._y = 0;
  73.                 break;
  74.             case "button-left" :
  75.                 titulo_txt._x = 0;
  76.                 titulo_txt._y = Stage.height-titulo_txt._height;
  77.                 break;
  78.             case "button-right" :
  79.                 titulo_txt._x = Stage.width-titulo_txt._width;
  80.                 titulo_txt._y = Stage.height-titulo_txt._height;
  81.                 break;
  82.         }
  83.     }
  84. }
  85. //estas son verduras (listeners) para la imagen cuando se carga,
  86. //esto ya es figurita repetida, en otros tutos esta explicado como funciona
  87. escuchar.onLoadInit = function(target:MovieClip) {
  88. };
  89. escuchar.onLoadStart = function(target:MovieClip) {
  90.     load_mc._x = (Stage.width/2)-(load_mc._width/2);
  91.     load_mc._y = (Stage.height/2)-(load_mc._height/2);
  92.     load_mc._visible = true;
  93. };
  94. escuchar.onLoadComplete = function(target:MovieClip, httpStatus:Number) {
  95.     load_mc._visible = false;
  96. };
  97. mcLoader.addListener(escuchar);

Así es el XML donde pasamos todos los parámetros

Clic para ver Texto Plano
XML:
  1. <360 titulo="Prueba LeoBaraldi" alingText="button-right" colorBack="0x000000" colorFont="0xFFFFFF" img="pano.jpg" ancho="2062"></360>

Los atributos del xml son muy simples pero por si las moscas explico:
titulo: Aquí colocas un titulo si quieres, sino lo hay el flash no imprime la caja de texto
alingText: Que posición se ubica la caja de texto (top-left - top-right - button-left - button-right)
colorBack: Color de fondo de la caja (valor hexadecimal) ejemplo: 0xFF0000 = rojo
colorFont: Color de la fuente
img: Url o nombre del archivo de imagen, puede ser jpg, png, gif o swf
ancho: Colocas el ancho de la imagen que vas a cargar

De mas esta decir que si quieres modificar las medidas del swf simplemente abre el fla, cambia las medidas publícalo y listo! no es necesario nada más!

ver ejemplodescargar archivos
categorias: ActionScript 2 Coment.: 3

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi