Comunidad de diseño web y desarrollo en internet online

ScrollBar > el contenido no se ve entero !!

Citar            
MensajeEscrito el 31 May 2006 05:21 pm
Q pasó

Esto igual es un rollo del copón, pero una ayudita por la gloria de su madre

Hice una ventana con sus barra de desplazamiento muy configurable para hacer un componente. En ella se puede establecer:

-el alto/ancho de la ventana
-el color y alfa de fondo de la ventana
-el tamaño de los márgenes superiores, inferiores, izquierdo y derecho ( entre fondo de la ventana y el contenido, barra de desplazamiento; y entre el área de contenido y la barra de desplazamiento )

-el color de fondo y alfa del área de contenido ( contenedor )
-el ancho, color y alfa de la barra de desplazamiento
-el alto, color y alfa del botón de la barra de desplazamiento
-el swf y su ruta, q se va a cargar cómo contenido
-el grosor, color y alfa de las lineas q rodean cada uno de los elementos anteriores

Está hecho y funciona. Pero no está bien del todo. Según alto del swf ( a mayor height ) q cargue como contenido, vá restándole posición _y. Osea, cuando la barra de desplazamiento está arriba de todo, la posición de contenido debería de ser 0 ( + el margen superior ). Pero lo q decía, cuanto mayor sea el alto del contenido cargado, en vez de volver a esa posición 0, le va restándo una cantidad relativa

Aviso. Sé q algo tiene q ver con el margen, al hacerse la posición digamos 'inicial' del contenido relativa al espacio del contenedo restándole el valor de margen superior e inferior. De hecho si pongo valores de margen(y) 0 no hay error , y el contenido llega a su posición 0 y posición max ( se ve todo el swf de principio a fin ), cuando el carro está arriba o abajo de todo.

Bajaros los archivos ventan.fla y doc.swf ( el doc q cargará como contenido ) y variar la variable margeny=5; a margeny=0; y vereis q no da error

el ejemplo de cómo con margeny=5 resta un error a la posición _y del contenido, lo veis aquí:

http://onehundred.dyndns.org/componentes/ventana%20barra%20de%20desplazamiento/ventana.html

el ejemplo de cómo con margeny=0 NO resta un error a la posición _y del contenido, lo veis aquí:

http://onehundred.dyndns.org/componentes/ventana%20barra%20de%20desplazamiento%20sin%20margeny/


y tanto ventana.fla, cómo el doc.swf q carga lo podeis bajar de aquí:

http://onehundred.dyndns.org/componentes/ventana%20barra%20de%20desplazamiento/ventana.swf

( está todo muy comentado )

Código :

// usa las librerías de easing de Ladislav Zigo para animar la generación de los elementos. Descargar en http://laco.wz.cz/tween/
#include "lmc_tween.as"

System.useCodepage = true;

// ventana de fondo : alto y ancho
ancho = 300;
alto = 200;

// márgenes x e y entre los elementos
margenx = 5;
// FIJAROS Q SI DEJO UN MARGENY = 0, NO RESTA NADA DE ERROR A LA POSICIÓN INICIAL _Y DEL CONTENIDO
margeny = 5;

// duración y tipo de easing usando las librerías de Ladislav Zigo
duracion = 0.5;
ease = "easeInOutExpo";

// directorio y documento .swf q va a cargarse cómo contenido de la ventana
directorio = "";
pelicula = "doc";

// ratio y fricción, para la aceleración/deceleración del contenido al mover la barra de desplazamiento
ratio = 0.4;
friccion = 0.01;

// ventana de fondo ( fondo ) : color, alfa
fColor = 0x990000;
fAlfa = 25;
fondoColor = new Color( fondo );
fondoColor.setRGB( fColor );
fondo._alpha = fAlfa;

// área de contenedor ( contenedor ) : color y alfa
ctColor = 0xffffff;
ctAlfa = 50;
ctndColor = new Color( contenedor );
ctndColor.setRGB( ctColor );
contenedor._alpha = ctAlfa;

// barra de desplazamiento ( barraD ) : ancho, color, alfa
brAncho = 5;
brColor = 0xffffff;
brAlfa = 50;
barraDColor = new Color( barraD );
barraDColor.setRGB( brColor );
barraD._alpha = brAlfa;

// botón 'carro' de barra de desplazamiento ( botonBD ) : alto, color, alfa
btAlto = 10;
btColor = 0x990000;
btAlfa = 50;
botonBDColor = new Color( botonBD );
botonBDColor.setRGB( btColor );
botonBD._alpha = btAlfa;

// lineas del borde de todos los elementos ( barraDLineas, botonBDLineas, contenedorLineas ): grueso, color, alfa
lGrosor = 1;
lColor = 0x000000;
lAlfa = 50;

// forma la ventana de fondo
fondo.tween("_width", ancho, duracion, ease );
fondo.tween("_height", alto, duracion, ease, 0, function (){ if ( fondo._height == alto ){ crearFondoLineas () } } );

function crearFondoLineas (){
   // resuelve la posición y el largo de cada línea, teniendo en cuenta el ancho-alto de la ventana y el grosor de la linea
   fondoLineas.lineStyle ( lGrosor, lColor, lAlfa );
   fondoLineas.moveTo ( -lGrosor/2, -lGrosor/2 );
   fondoLineas.lineTo ( ancho + lGrosor/2, -lGrosor/2 );
   fondoLineas.lineTo ( ancho + lGrosor/2, alto + lGrosor/2 );
   fondoLineas.lineTo ( - lGrosor/2, alto + lGrosor/2 );
   fondoLineas.lineTo ( - lGrosor/2, -lGrosor/2 );
   // llamada a crear barra de Desplazamiento
   crearBarraD ()
   
};

// crear barra de desplazamiento
function crearBarraD (){
   // posición x e y ( a la dercha, osea, el ancho de la ventana de fondo, menos el margen, menos el ancho de la barra de desplazamiento
   barraD._x = ancho - brAncho - margenx;
   barraD._y = margeny;
   // forma la barra de desplazamiento
   barraD.tween("_width", brAncho, duracion, ease );
   barraD.tween("_height", alto - ( 2 *  margeny ), duracion, ease, 0, function (){ if ( barraD._height == ( alto - ( 2 *  margeny ) ) ){ crearBarraDLineas () } } );
   
};
// crear las lineas de borde de la barra de desplazamiento
function crearBarraDLineas (){
   // resuelve la posición y el largo de cada línea, teniendo en cuenta el ancho-alto de la barra, el grosor de la linea, margenx y margeny
   barraDLineas.lineStyle ( lGrosor, lColor, lAlfa );
   barraDLineas.moveTo ( ancho - brAncho - margenx - lGrosor/2, margeny - lGrosor/2 );
   barraDLineas.lineTo ( ancho - margenx + lGrosor/2, margeny - lGrosor/2 );
   barraDLineas.lineTo ( ancho - margenx + lGrosor/2, alto - ( margeny ) +  lGrosor/2 );
   barraDLineas.lineTo ( ancho - brAncho - margenx - lGrosor/2, alto - ( margeny ) +  lGrosor/2 );
    barraDLineas.lineTo ( ancho - brAncho - margenx - lGrosor/2, margeny - lGrosor/2 );
   // y llama a crear contenedor
   crearContenedor ();
   
};
// crear contenedor
function crearContenedor(){
   // posición de la máscara
   mascara._x = margenx;
   mascara._y = margeny;
   // esto me lo podía ahorrar y poner el tamaño directamente
   mascara.tween("_width", ancho - ( 3 * margenx ) - brAncho, duracion, ease );
   mascara.tween("_height", alto - ( 2 *  margeny ), duracion, ease );
   // posición del contenido
   contenido._x = margenx;
   contenido._y = margeny;
   // posición y formar el contenedor ( es un fondo meramente estético para contrastar el contenido, si el swf q se cargue no tuviera color de fondo, y para delimitar por si las líneas fueran invisibles y eso
   contenedor._x = margenx;
   contenedor._y = margeny;
   contenedor.tween("_width", ancho - ( 3 * margenx ) - brAncho, duracion, ease );
   contenedor.tween("_height", alto - ( 2 *  margeny ), duracion, ease, 0, function (){ if ( contenedor._height == (  alto - ( 2 *  margeny ) ) ){ crearContenedorLineas (); } } );
   
};
// crear las líneas del contenedor
function crearContenedorLineas (){
   // lo mismo q con la barra de desplazamiento pero para valores de posición y tamaño del contenedor
   contenedorLineas.lineStyle ( lGrosor, lColor, lAlfa );
   contenedorLineas.moveTo ( margenx - lGrosor/2, margeny - lGrosor/2 );
   contenedorLineas.lineTo ( margenx + ancho - ( 3 * margenx ) - brAncho + lGrosor/2, margeny - lGrosor/2 );
   contenedorLineas.lineTo ( margenx + ancho - ( 3 * margenx ) - brAncho + lGrosor/2, alto - ( margeny ) + lGrosor/2 );
   contenedorLineas.lineTo ( margenx - lGrosor/2, alto - ( margeny ) + lGrosor/2 );
   contenedorLineas.lineTo ( margenx - lGrosor/2, margeny - lGrosor/2 );
   // llamada a crear botón de la barra de desplazamiento
   crearBotonBD ();
   
};
// crear botón de la barra de desplazamiento ( carro )
function crearBotonBD (){
   // le pongo el área clickable dentro del botón
   botonBD.attachMovie ( "area", "area", getNextHighestDepth() );
   // posición del botón seguún la posición de la barra de desplazamiento y formación
   botonBD._x = barraD._x;
   botonBD._y = barraD._y;
   botonBD.tween("_width", brAncho, duracion, ease );
   botonBD.tween("_height", btAlto, duracion, ease, 0, function (){ if ( botonBD._height == btAlto ){ crearBotonBDLineas() } } );
   
};
// crear las lineas del botón de la barra
function crearBotonBDLineas(){
   
   botonBDLineas.lineStyle ( lGrosor, lColor, lAlfa );
   botonBDLineas.moveTo ( barraD._x - lGrosor/2, barraD._y - lGrosor/2 );
   botonBDLineas.lineTo ( barraD._x + brAncho + lGrosor/2, barraD._y - lGrosor/2 );
   botonBDLineas.lineTo ( barraD._x + brAncho + lGrosor/2, barraD._y + btAlto + lGrosor/2 );
   botonBDLineas.lineTo ( barraD._x - lGrosor/2, barraD._y + btAlto + lGrosor/2 );
   botonBDLineas.lineTo ( barraD._x - lGrosor/2, barraD._y - lGrosor/2 );
   
   cargarPelicula ();
};
// carga del swf q tomamos como contenido de la ventana
function cargarPelicula (){

   precargador = new MovieClipLoader();
   listener = new Object();

   listener.onLoadStart = function( target_mc ) {

      contenedor.attachMovie( "barraCarga", "barraCarga", contenedor.getNextHighestDepth() );
      contenedor.barraCarga._x = ( contenedor._width )/2;
      contenedor.barraCarga._y = ( contenedor._height )/2;

   };

   listener.onLoadProgress = function( target_mc, loadedBytes, totalBytes ){

      porcentaje = 0;
      porcentaje = Math.round( ( loadedBytes * 100)/ totalBytes );
      contenedor.barraCarga._width;
      target_mc._visible = false;

   };

   listener.onLoadComplete = function( target_mc ) {

      contenedor.barraCarga.removeMovieClip();
      target_mc._visible = true;
      
   };

   precargador.addListener( listener );
   
   if ( directorio != "" ){
      
      directorio = directorio + "/";
      
   };
   
   precargador.loadClip( directorio + pelicula + ".swf", contenido );
   
};

botonBD.onPress = function (){
   
   // EN ALGÚN MOMENTO DE ESTA FUNCIÓN TENGO Q TENER EN CUENTA EL MÄRGENY
   // PERO NO SE DÓNDE, EXACTAMENTE, Y CÓMO HACER LA POSICIÓN DEL CONTENIDO
   // RELATIVO HAY UNA DISTANCIA DE MARGEN POR LA PARTE SUPERIOR, Y OTRA IGUAL PERO POR LA PARTE INFERIOR
   
   // cálculo de la posición _y máxima hasta donde podrá desplazarse el botón, según la posición _y de la barra, sumado al alto de la barra de desplazamiento y restando el alto del botón q prefijemos para q no se pase del alto de la barra
   botonBDMaxPos = barraD._y + barraD._height - btAlto ;
   // cálculo de la posición _y máxima que alcanzará del contenido, según el tamaño del contenido cargado restado a la posición _y + alto de la barra de desplazamiento( área del contenido )
   contenidoMaxPos = - contenido._height + barraD._y + barraD._height;
   // traceamos para ver q los valores son correctos según la altura del swf cargado
   trace ( "botón Maxima Posición _y = " add botonBDMaxPos);
   trace ( "contenido Maxima Posición _y = " add contenidoMaxPos);
   trace ( "contenido Alto = " add contenido._height );
   
   // arrastrar botón delimitando su posición mínima/máxima de x,y
   this.startDrag ( false, barraD._x, barraD._y, barraD._x, botonBDMaxPos );
   
   this.onEnterFrame = function (){
      // arreglillo para q las líneas del botón no se vuelvan locas al mover el botón
      botonBDLineas._y = this._y - margeny - lGrosor/2;
      
      // cálculo la posición _y del contenido segun la regla de 3, posición _y actual del botón, teniendo en cuenta cual era la máxima posición _y hasta donde lo podemos arrastrar, y la máxima posición de _y q el contenido pueda alcanzar
      contenidoy = ( ( botonBD._y * ( contenidoMaxPos ) )/ botonBDMaxPos );
      
      // cálculo de la velocidad. He comentado el ratio y la fricción para evitar q la deceleración pueda influír en el error q trato de averiguar
      velocidad = ( ( contenidoy - contenido._y )/* * ratio ) + ( velocidad * friccion*/ )
      
      // mientras la velocidad se pase de 1 o -1 ( esto tenía sentido si descomentáseos el ratio y la fricción en el cálculo de la velocidad )
      if ( velocidad > 1 or velocidad < -1 ) {
         
         // incrementamos la posición _y del contenido con el valor de la velocidad
         contenido._y = contenido._y + velocidad;
         
         // traceamos la posición _y actual del contenido para q podais ver el error para valores de margen distintos de 0
         trace ( contenido._y );
      
      // para velocidad entre 1 y -1, velocidad tomará un valor 0
      } else {
         
         velocidad = 0;
         
         
      };
   };
};
// al liberar el botón, dejar de arrastrar
botonBD.onReleaseOutside = function (){
   
   this.stopDrag ();
   if ( velocidad <= 0 ){
      
      delete botonBD.onEnterFrame ();
      
   };
};

botonBD.onRelease = function (){
   
   this.stopDrag ();
   if ( velocidad <= 0 ){
      
      delete botonBD.onEnterFrame ();
      
   };
};


Si alguien me explicar por q´, lo agradecería mucho. Por q mi olla no da para más

Y bueno, con unas cuantas mejoras y convertido a componente, una cvez terminado; si quereis lo dejo por aquí con un pequeño tutorial, o incluso el componente con su interfaz de usuario o como se llame, para q la peña cambie las variables a gusto

Un saludo veranil del puto 100

Por 100

13 de clabLevel



 

FERROR

firefox
Citar            
MensajeEscrito el 31 May 2006 07:39 pm
Perdon..

Ventana con margeny = 5 ( se ve error posición _y de contenido ), ver aquí:

http://onehundred.dyndns.org/componentes/ventana%20barra%20de%20desplazamiento/ventana.html



Ventana con margeny = 0 ( se ve error posición _y de contenido ), ver aquí:

http://onehundred.dyndns.org/componentes/ventana%20barra%20de%20desplazamiento%20sin%20margeny/ventana.html



Archivos para descargar, aquí:

http://onehundred.dyndns.org/componentes/zip/

Por 100

13 de clabLevel



 

FERROR

firefox
Citar            
MensajeEscrito el 01 Jun 2006 02:38 pm
Puse todo el tocho pero el problema está posiblemente al final, en la parte dónde se aprieta el botón campeón

Código :

botonBD.onPress = function (){

   

[b]   // EN ALGÚN MOMENTO DE ESTA FUNCIÓN TENGO Q TENER EN CUENTA EL MÁRGENY
   // PERO NO SE DÓNDE, EXACTAMENTE, Y CÓMO HACER Q LA POSICIÓN _Y DEL CONTENIDO SEA
   // RELATIVA A UNA DISTANCIA DE MARGEN POR LA PARTE SUPERIOR, Y OTRA IGUAL PERO POR LA 
   // PARTE INFERIOR. O NO SE..[/b]

   

   // cálculo de la posición _y máxima hasta donde podrá desplazarse el botón, según la posición _y de la barra, sumado al alto de la barra de desplazamiento y restando el alto del botón q prefijemos para q no se pase del alto de la barra

   botonBDMaxPos = barraD._y + barraD._height - btAlto ;

   // cálculo de la posición _y máxima que alcanzará del contenido, según el tamaño del contenido cargado restado a la posición _y + alto de la barra de desplazamiento( área del contenido )

   contenidoMaxPos = - contenido._height + barraD._y + barraD._height;

   // traceamos para ver q los valores son correctos según la altura del swf cargado

   trace ( "botón Maxima Posición _y = " add botonBDMaxPos);

   trace ( "contenido Maxima Posición _y = " add contenidoMaxPos);

   trace ( "contenido Alto = " add contenido._height );

   

   // arrastrar botón delimitando su posición mínima/máxima de x,y

   this.startDrag ( false, barraD._x, barraD._y, barraD._x, botonBDMaxPos );

   

   this.onEnterFrame = function (){

      // arreglillo para q las líneas del botón no se vuelvan locas al mover el botón

      botonBDLineas._y = this._y - margeny - lGrosor/2;

      

      // cálculo la posición _y del contenido segun la regla de 3, posición _y actual del botón, teniendo en cuenta cual era la máxima posición _y hasta donde lo podemos arrastrar, y la máxima posición de _y q el contenido pueda alcanzar

      contenidoy = ( ( botonBD._y * ( contenidoMaxPos ) )/ botonBDMaxPos );

      

      // cálculo de la velocidad. He comentado el ratio y la fricción para evitar q la deceleración pueda influír en el error q trato de averiguar

      velocidad = ( ( contenidoy - contenido._y )/* * ratio ) + ( velocidad * friccion*/ )

      

      // mientras la velocidad se pase de 1 o -1 ( esto tenía sentido si descomentáseos el ratio y la fricción en el cálculo de la velocidad )

      if ( velocidad > 1 or velocidad < -1 ) {

         

         // incrementamos la posición _y del contenido con el valor de la velocidad

         contenido._y = contenido._y + velocidad;

         

         // traceamos la posición _y actual del contenido para q podais ver el error para valores de margen distintos de 0

         trace ( contenido._y );

      

      // para velocidad entre 1 y -1, velocidad tomará un valor 0

      } else {

         velocidad = 0;

      };

   };

};


Si no haré el truco barato de q si el botónBD está en posición _y = 0 - margeny, la posición _y del contenido sea = 0 - margeny. Me code, pero tirando..

Un saludo 100
..y Dream Theater me sigue sin molar demasiado. Se lo comen, eso si :|

Por 100

13 de clabLevel



 

FERROR

firefox
Citar            
MensajeEscrito el 01 Jun 2006 04:34 pm
err.. buen, ya puestos ha hablar sólo, dejo el tema entero por q me va mal con Zimmerman [:}[:}[:}
Éste no es el sitio, lo sé. No se me reboten, y lean el texto q no tiene desperdicio. Se puede extrapolar a la realidad actual
Y eso q está escrito en el 63. Además Bobby se merece un homenaje
El disco 'Highway 61 Revisited' arrasa, lo recomiendo. Q te manden a la autopista 61 es poco más como si te mandan a tomar por culo, no? Bobby q es muy sutil..

Dylan dejó la acústica y toda la parafernalia q le había encumbrado como la nueva promesa del Folk; se colgó una eléctrica Telecaster y se buscó una banda. Y 3 días de grabación después, al más puro estilo 'tu tóca q ya irá saliendo..', se curtieron el mítico larga duración. En ese momento para horror de la esfera más purista de la música tradicional americana, un sonido nuevo había nacido. Y bueno, la etiqueta fué Folk Rock

La cosa seguía así:

Bien..
A Georgia Sam le sangraba la nariz
En Sanidad no le dieron ni un pañuelo
Le preguntó al pobre Howard ' y yo ahora a dónde voy '
y Howard le dijo : ' sólo hay un sitio, q sepa yo '
Sam dijo : ' Díme rápido tío, que tengo q salir pitando '
El viejo Howard señaló con su pistola y dijo :
' camino abajo, por la Autopista 61 '

Bien..
Mack 'el Dedo' dijo a Louie 'el Rey'
Conseguí 40 cordones de zapatos blancos, azules y rojos,
y 1000 teléfonos que no suenan
Sabe ud. dónde puedo deshacerme de todo esto?
Y Louie 'el Rey' dijo : ' déjame pensar un minuto, hijo.. '
Y dijo : ' Sí. Creo q sé de un sitio dónde lo harás facilmente '
' Sólo tienes q bajar todo recto, a la Autopista 61 '

La quinta hija en la noche de reyes,
le dijo al primer padre que las cosas no iban bien
' Mi cutis ', dijo, ' es demasiado blanco '
y el dijo : ' ven acá cerca de la luz.. ', y dice : ' ..hmm, pues tienes razón..
déjame preguntarle a tu segunda madre a ver q´ ha estado haciendo.. '
Pero la segunda madre estaba ya por el séptimo hijo,
y ambos tirando por la Autopista 61

El mal perdedor se aburría un rato
y se puso a crear la siguiente guerra mundial
Encontró a un promotor que casi se le tiró al suelo
Y dijo : ' nunca antes me apuntara a algo como esto '
' Pero sí!, pienso que va a ser fácil de hacer
Sólo saca a la grada a q le dé un poco el sol
y ya la tienes, en la Autopista 61 '

fin

-----------------------------------------------------------------------

y aquí modestamente, añado yo

El inútil de 100 no le rulaba el scroll,
no veía el fallo pq el fallo era él
Le preguntó a EleCash q andaba más a su blog
' Q pasó, tío, te comes este marrón? '
EleCash vió el tocho y pensó: ' pues casi va a ser q no.. '
Así q no hizo falta alargar más el post,
y le mandó directamente a la Autopista 62


Saludos. Lo q uno tiene q hacer para q le hagan un poco de caso, joer !!!

Por 100

13 de clabLevel



 

FERROR

firefox
Citar            
MensajeEscrito el 02 Jun 2006 10:39 am
100 bienvenido al foro, leete las reglas de este y toma tu dosis de C_c, bien ahora no me abrieron los links que mandaste..... se paciente a que alguien responda la mayoria lo hacemos cuando tenemos algun tiempo libre, con respecto a lo utlimo que pusiste emmm pues creo que no va aqui :lol: bueno fijate si tienen algo mal tus links porque nunca me abrieron, saludos y vienvenido nuevamente.

Por jaimoco

299 de clabLevel



Genero:Masculino  

choya bay , mexico

firefox
Citar            
MensajeEscrito el 02 Jun 2006 02:26 pm
Puff Disculpas. A veces se me cae el servidor cuando tengo el eMule puesto. A las 2-3 pierdo la conexión con el servidor al q esté conectado eMule y automáticamente pierdo la conexión a internet para todas las aplicaciones. Puede tener algo q ver con Auto-Protect de Norton Antivirus cuando trata de mirar si hay virus en archivos comprimidos. Pero bueno, no estoy seguro

EMule apagado mientras no lo resuelva

Ahora no habrá problemas

Ei! Muchas Gracias y lo de la cancioncita es una coña. Cuantas cosas hemos aprendido con los tutoriales, ejemplos, foros y actualidad de Cristalab. A cualquier flasher q le pregunte, pasa por aquí para documentarse o resolver rollos

Saludos!!

Por 100

13 de clabLevel



 

FERROR

firefox

 

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