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
