Comunidad de diseño web y desarrollo en internet online

Creada clase de ventana redimensionable

Citar            
MensajeEscrito el 24 Ago 2006 12:21 pm
Pues eso, que acabe de hacer la ventana redimensionable y como dije en mi ultimo post, la cuelgo para que la utilice y la mejore todo el que quiera.

Los elementos necesarios en la biblioteca para que funcione son:
-Componentes scrollPane y label
-Botones "Cerrrar_btn","Restaurar_btn","Redimensionar_btn" y "Minimizar_btn" con estos id de vinculacion (medida 13x13)
- MovieClip vacio con nombre de vinculacion "Contenido";

Un ejemplo de uso real:
- http://carpex.fis.usal.es/~ssoo

Entre las posibles mejoras así a primera vista:
- sustituir el boton redimensionar por botones transparentes adaptados a los bordes de la ventana
- una funcion que permita actualizar el contenido del scrollpane para que al dibujar sobre él se apliquen los cambios de scroll.
- Cambiar colores de componentes como por ejemplo el fondo

En fin, espero que les sea útil y si le hacen mejoras cuélguenlas para que podamos beneficiarnos todos

Saludos


Código :

class Ventana 
{
   var ALTOBARRA:Number = 20;
   static var id:Number =0;
       var x:Number;
   var y:Number;
       var ancho;
   var alto;
   var titulo:String;   
   var padre:MovieClip;
   var ventana:MovieClip;

       // Estos son los elementos de que va a constar la ventana pero se pueden omitir estas
       // variables si se quiere porque estan todos contenidos en el movieClip "ventana".
   var contenedor:MovieClip;
   var contenido:MovieClip;
   var barraTitulo:MovieClip;
   var cerrar_btn:MovieClip;
   var redimension_btn:MovieClip;
   var minimizar_btn:MovieClip;
   var restaurar_btn:MovieClip;
   var fondo:MovieClip;   
   
   
   function get Contenido():MovieClip
   {
      return contenido;
   }
   
   function get Titulo():String
   {
      return barraTitulo.Titulo.text;
   }
   function set Titulo(valor:String):Void
   {
      titulo = valor;
      barraTitulo.Titulo.text = valor;
   }
   
   public function Ventana(x:Number,y:Number,ancho:Number,alto:Number,padre:MovieClip)
   {
      id++;      
      if (padre == undefined || padre == null)
         this.padre = _root;      
      else
         this.padre = padre;
         
      if (ancho > 100)
         this.ancho = ancho;
      else
         this.ancho=100;
         
      if (alto >100)
         this.alto = alto;
      else
         this.alto = 100;
         
      this.x = x;
      this.y = y;
      ventana = this.padre.createEmptyMovieClip("window"+id,padre.getNextHighestDepth());
      
      // Añadimos el fondo blanco tras el ScrollPane
      fondo = ventana.createEmptyMovieClip("Fondo", 2);
       crearRectangulo(this.ancho,this.alto - ALTOBARRA,0xffffff,fondo);
      fondo._y = y+ALTOBARRA;
      fondo._x = x;      
      
      // Creamos el ScrollPane que hara las veces de cuerpo de la ventana
      contenedor = ventana.attachMovie("ScrollPane","scrollPane",5);            
      contenedor.contentPath = "Contenido";
      contenido = contenedor.content.createEmptyMovieClip("Contenido",contenedor.getNextHighestDepth());
      contenedor.move(x,y+ALTOBARRA);
      contenedor.setSize(this.ancho, this.alto-ALTOBARRA);            
      
      // Creamos la barra de Titulo y añadimos la capacidad de arrastre
      barraTitulo = ventana.createEmptyMovieClip("BarraTitulo",10);
      crearRectangulo(this.ancho,ALTOBARRA,0xa3b2cc,barraTitulo);
      var title_txt = barraTitulo.attachMovie("Label","Titulo",100);
      title_txt.text = "Sin Titulo";      
      titulo = "sin titulo";
      barraTitulo._y = y;      
      barraTitulo._x = x;
      barraTitulo.onPress = function(evt:Object)
      {         
         if (this._xmouse>=0 && this._xmouse<=barraTitulo._width && this._ymouse>=0 && this._ymouse<=ALTOBARRA) {            
            startDrag(this._parent);            
         }
         this._parent.swapDepths(_root.getNextHighestDepth());
      }
      barraTitulo.onRelease = function (evt:Object)
      {
         stopDrag();         
      }
      
      // Añadimos el boton de cierre      
      cerrar_btn = ventana.attachMovie("Cerrar_btn","Cerrar_btn",15);               
      cerrar_btn._x = x + this.ancho - cerrar_btn._width - 5;
      cerrar_btn._y = y+3;
      
      cerrar_btn.onRelease = function (evt:Object)
      {   this._parent._visible = false;   }   
      
      // Boton minimizar
      minimizar_btn = ventana.attachMovie("Minimizar_btn","Minimizar_btn",17);
      minimizar_btn._x = cerrar_btn._x - minimizar_btn._width - 3;      
      minimizar_btn._y = y+3;
      
      minimizar_btn.onRelease = function (evt:Object)
      {   
         this._parent.Fondo._visible = false;
         this._parent.scrollPane._visible = false;   
         this._parent.Redimension_btn._visible = false;
         this._parent.Restaurar_btn._visible = true;
         this._visible = false;
      }
      
      restaurar_btn = ventana.attachMovie("Restaurar_btn","Restaurar_btn",19);
      restaurar_btn._visible = false;
      restaurar_btn._x = cerrar_btn._x - restaurar_btn._width - 3;      
      restaurar_btn._y = y+3;      
      restaurar_btn.onRelease = function (evt:Object)
      {   
         this._parent.Fondo._visible = true;
         this._parent.scrollPane._visible = true;   
         this._parent.Redimension_btn._visible = true;
         this._parent.Minimizar_btn._visible = true;
         this._visible = false;
      }
      
      
      
      // Añadimos boton de redimension
      redimension_btn = ventana.attachMovie("Redimension_btn","Redimension_btn",16);
      redimension_btn._x = x + this.ancho - redimension_btn._width - 2;
      redimension_btn._y = y + this.alto - redimension_btn._height - 1;
      redimension_btn.window = this;
      redimension_btn.onPress = function(evt:Object)
      {
         this.tempx = this._xmouse;
         this.tempy = this._ymouse;
         
         //Creamos una animacion para la redimension
         this.animacion = this._parent.createEmptyMovieClip("borde",80);
         this.animacion.window = this.window;
         this.animacion.onEnterFrame = function (evt:Object)
         {            
            var rect = this.createEmptyMovieClip("sombra",10);
            rect._x = this.window.x;            
            rect._y = this.window.y;            
            if (this._xmouse >= this.window.x && this._ymouse >= this.window.y)            
               this.window.crearRectangulo(this._xmouse - rect._x,this._ymouse - rect._y,0x222222,rect); 
         }
         this.animacion._alpha = 10;
         this._parent.swapDepths(_root.getNextHighestDepth());
      }      
      redimension_btn.onReleaseOutside = function (evt:Object)
      {
         // Lo primero matamos la animacion
         this.animacion.removeMovieClip(this.animacion.rect);
         
         //Tomamos medidas
         var ancho = this.window.ancho;
         var alto = this.window.alto;         
         if (this._xmouse >= this.tempx && this._ymouse >= this.tempy)
         {            
            var diferenciax = this._xmouse - this.tempx;
            var diferenciay = this._ymouse - this.tempy;            
            this.window.redimensionar(ancho + diferenciax,alto + diferenciay);
         }
         
         else if (this._xmouse >= this.tempx && this._ymouse <= this.tempy)
         {            
            var diferenciax = this._xmouse - this.tempx;
            var diferenciay = this.tempy - this._ymouse;            
            this.window.redimensionar(ancho + diferenciax, alto - diferenciay);
         }
         
         else if (this._xmouse <= this.tempx && this._ymouse >= this.tempy)
         {         
            var diferenciax = this.tempx -this._xmouse;
            var diferenciay = this._ymouse - this.tempy;            
            this.window.redimensionar(ancho - diferenciax, alto + diferenciay);
         }
         else if (this._xmouse <= this.tempx && this._ymouse <= this.tempy)
         {         
            var diferenciax = this.tempx - this._xmouse;
            var diferenciay = this.tempy - this._ymouse;            
            this.window.redimensionar(ancho - diferenciax, alto - diferenciay);
         }                        
      }
      redimension_btn.onRelease = redimension_btn.onReleaseOutside;   
   }   
   
   public function redimensionar(ancho,alto)
   {      
      // Se establecen unos valores minimos de altitud y anchura para la ventana
      if (ancho > 100)
         this.ancho = ancho;      
      else 
         this.ancho = 100;
      
      if(alto>100)
         this.alto = alto;      
      else 
         this.alto = 100;
         
         
      // Añadimos el fondo blanco tras el ScrollPane
      fondo = ventana.createEmptyMovieClip("Fondo", 2);
      crearRectangulo(this.ancho,this.alto - ALTOBARRA,0xffffff,fondo);      
      fondo._x = x;
      fondo._y = y + ALTOBARRA;    
         
      //El ScrollPane
      contenedor.setSize(this.ancho, this.alto-ALTOBARRA);      
      
      // La barra de titulo
      barraTitulo = ventana.createEmptyMovieClip("BarraTitulo",10);      
      crearRectangulo(this.ancho,ALTOBARRA,0xa3b2cc,barraTitulo);
      var title_txt = barraTitulo.attachMovie("Label","Titulo",100);
      title_txt.text = titulo;      
      barraTitulo._x = x;
      barraTitulo._y = y;
      barraTitulo.onPress = function(evt:Object)
      {         
         if (this._xmouse>=0 && this._xmouse<=barraTitulo._width && this._ymouse>=0 && this._ymouse<=ALTOBARRA) {            
            startDrag(this._parent);            
         }         
         this._parent.swapDepths(_root.getNextHighestDepth());
      }
      barraTitulo.onRelease = function (evt:Object)
      {   stopDrag();      }
         
      // botones
      cerrar_btn._x = barraTitulo._x + this.ancho - cerrar_btn._width - 5;   
      minimizar_btn._x = cerrar_btn._x - minimizar_btn._width - 3;   
      restaurar_btn._x = cerrar_btn._x - restaurar_btn._width - 3;      
      redimension_btn._x = x + this.ancho - redimension_btn._width - 2;
      redimension_btn._y = y + this.alto - redimension_btn._height - 1;         
   }   
   
   function crearRectangulo(ancho:Number,alto:Number,color:Number,mc:MovieClip)
   {      
      mc.beginFill(color);
      mc.lineStyle(2);
      mc.lineTo(0, alto);
      mc.lineTo(ancho, alto);
      mc.lineTo(ancho, 0);
      mc.lineTo(0, 0);      
   }
}

Por adriesp

113 de clabLevel

1 tutorial

Genero:Masculino  



Ultima edición por adriesp el 12 Feb 2008 02:21 am, editado 1 vez

Salamanca

opera
Citar            
MensajeEscrito el 24 Ago 2006 05:01 pm
Lo muevo al foro de Aportes.

Gracias por el ejemplo, tiene buena pinta ;)

Por Elecash

Claber

8126 de clabLevel

37 tutoriales
19 articulos
13 ejemplos

  Bastard Operators From Hell Desarrollador de GAIA Premio_Secretos Héroes

BarnaCity

firefox
Citar            
MensajeEscrito el 28 Ago 2006 10:00 am
Estupendo y muy útil. Gracias!

Por Sisco

BOFH

3700 de clabLevel

12 tutoriales
4 articulos

Genero:Masculino   Bastard Operators From Hell

Catalunya

firefox

 

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