Clase para crear scroll con easing en Actionscript 3.0

Esta es una clase para crear un scroll con easing en Actionscript 3.0. Hay que pasarle los siguientes parámetros:
  • Clip que queremos controlar con el scroll
  • Posición x del Scroll
  • Posición y del scroll
  • Ancho del scroll
  • Altura del scroll (será el alto de la máscara
  • Color de la barra grande
  • Color de la barra de arrastre
  • Color de los contornos de las barras

Por supuesto es mejorable, se admiten comentarios en contacto@esedeerre.com.

package{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Rectangle;
	public class Scroll extends Sprite{
		var alto:Number;
		var separacion:Number = 10;
		var ancho:Number;
		var recorrido:Number;
		var clip:MovieClip;
		//Función constructora
		public function Scroll(mc:MovieClip,posx:Number,posy:Number,anc:Number,alt:Number,color1:uint,color2:uint,color3):void {
			clip = mc;
			alto = alt;
			ancho = anc;
			recorrido = 7*alto/8;
			x = clip.x - ancho - separacion;
			y = clip.y;
			CrearBarra("Barra_mc",ancho,alto,color1,color3);
			CrearBarra("Barrita_mc",ancho,alto/8,color2,color3);
			PonerMascara(clip);
			getChildByName("Barrita_mc").addEventListener(MouseEvent.MOUSE_DOWN,Arrastrar);
			getChildByName("Barrita_mc").addEventListener(MouseEvent.MOUSE_UP,Soltar);
			getChildByName("Barrita_mc").addEventListener(MouseEvent.MOUSE_OUT,Soltar);
			addEventListener(Event.ENTER_FRAME,Colocar);
		}
		//Crea una barra y la añade al escenario
		private function CrearBarra(nombre:String,ancho:Number,alto:Number,color:uint,colormarco:uint):void {
			var hijo:Sprite = new Sprite();
			hijo.name = nombre;
			hijo.graphics.beginFill(color);
			hijo.graphics.lineStyle(0.1, colormarco);
			hijo.graphics.drawRect(0, 0, ancho, alto);
			hijo.graphics.endFill();
			addChild(hijo);
		}
		//Arrastra la barrita de arrastre
		private function Arrastrar(e:MouseEvent):void{
			var mc:Sprite = e.target as Sprite;
			mc.startDrag(false,new Rectangle(0,0,0,alto-mc.height));
		}
		//Suelta la barrita de arrastre
		private function Soltar(e:MouseEvent):void{
			e.target.stopDrag();
		}
		//Dibuja un rectángulo y lo coloca como máscara del clip sobre el que queremos hacer
		//croll
		private function PonerMascara(mc:MovieClip):void{
			var mascara:Sprite = new Sprite();
			mascara.graphics.beginFill(0x000000);
			mascara.graphics.lineStyle(1, 0x000000);
			mascara.graphics.drawRect(0, 0, mc.width, alto);
			mascara.graphics.endFill();
			mascara.x = separacion + ancho;
			mc.mask = mascara;
			addChild(mascara);
		}
		//Función que mueve el clip cuando hacemos scroll
		private function Colocar(e:Event):void{
			var porcentaje = 1 - (Math.round(recorrido - getChildByName("Barrita_mc").y))/recorrido;
			var fin = -((clip.height - alto) * porcentaje - y);
			clip.y += (fin - clip.y)/10;
		}
 
	}
}

Comentarios:
christian dijo:
Tu scroll tiene el mismo problema que tenia el mio, al presionar y hacer "releaseOutSide", deja de funcionar cuando un scroll real sigue funcionando, opte por usar ENTER_FRAME y detectar los diferentes eventos y mover enves de usar startDrag
christian dijo:
Tambien note que si arrastras muy rapido hacia arriba ó abajo deja de funcionar el startDrag
Julian dijo:
El problema no es la velocidad, el problema es que cuando detecta que se ha salido el mouse de los limites de la barra en posicion X ya el efecto de scroll no funciona.
jeferson dijo:
muy buenos los ejemplos lo impotamte es que son bastante claros bnnnnnn
Omar dijo:
Estimado queria consularte si esta funcion me permite controlar un Sprite, concretamente una galeria de videos vertical, la cual quiero alinearla en dicho contenedor "Sprite", para posteriormente controlarla por un scrollbar. agradecido por las sugerencias que me puedas facilitar
Omar dijo:
Pues bien como te comentaba, mi galeria de iamgen thumbs es vertical, dentro de un sprite, lo que estoy realizando es esto adaptado a la clase tuya. var scrolls:Scroll = new Scroll (main_container2(contenedor mencionado), thumbs_y, thumbs_x, 30, 200, 250, 128, 114); main_container2(contenedor mencionado).addChild (scrolls); fijate que en la clase en vez de ser MovieClip coloque que fuera el sprite. Gracias por tu ayuda
jesenia dijo:
Soy novata en esto, perdon por la pregunta pero como le cambio el color del outline a la barra grande?
Dejar un comentario:
Tu nombre (obligatorio):

E-mail (obligatorio, no se mostrará):

Web: