Scrollbar y slide en AS3

Hola que tal. Tengo un código para hacer un scroll bar y estoy descifrando en que parte poner cada cosa. SI alguien tiene sugerencias. Esta es mi teoría:

Esta parte segun yo va en el cuadrito que puede arrastrarse arriba y abajo y que llaman |slider|

[as]

package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

/**
* Represents the base functionality for Sliders.
*
* Broadcasts 1 event:
* -SliderEvent.CHANGE
*/
public class Slider extends Sprite
{
// elements
protected var track:Sprite;
protected var marker:Sprite;

// percentage
protected var percentage:Number = 0;
/**
* The percent is represented as a value between 0 and 1.
*/
public function get percent():Number { return percentage; }
/**
* The percent is represented as a value between 0 and 1.
*/
public function set percent( p:Number ):void
{
percentage = Math.min( 1, Math.max( 0, p ) );
marker.y = percentage * (track.height - marker.height);

dispatchEvent( new SliderEvent( SliderEvent.CHANGE, percentage ) );
}

/**
* Constructor
*/
public function Slider()
{
createElements();
}

// ends the sliding session
protected function stopSliding( e:MouseEvent ):void
{
marker.stopDrag();
stage.removeEventListener( MouseEvent.MOUSE_MOVE, updatePercent );
stage.removeEventListener( MouseEvent.MOUSE_UP, stopSliding );
}
// updates the data to reflect the visuals
protected function updatePercent( e:MouseEvent ):void
{
e.updateAfterEvent();
percentage = marker.y / (track.height - marker.height);

dispatchEvent( new SliderEvent( SliderEvent.CHANGE, percentage ) );
}

// Executed when the marker is pressed by the user.
protected function markerPress( e:MouseEvent ):void
{
marker.startDrag( false, new Rectangle( 0, 0, 0, track.height - marker.height ) );
stage.addEventListener( MouseEvent.MOUSE_MOVE, updatePercent );
stage.addEventListener( MouseEvent.MOUSE_UP, stopSliding );
}

/**
* Creates and initializes the marker/track elements.
*/
protected function createElements():void
{
track = new Sprite();
marker = new Sprite();

track.graphics.beginFill( 0xCCCCCC, 1 );
track.graphics.drawRect(0, 0, 10, 100);
track.graphics.endFill();

marker.graphics.beginFill( 0x333333, 1 );
marker.graphics.drawRect(0, 0, 10, 15);
marker.graphics.endFill();

marker.addEventListener( MouseEvent.MOUSE_DOWN, markerPress );

addChild( track );
addChild( marker );
}
}
}

[as/]

Despu[es viene el |Slider Event| que es segun yo el movimiento que se le da, es otra opcion del anterior, cierto??

[as]

package
{
import flash.events.Event;

public class SliderEvent extends Event
{
// events
public static const CHANGE:String = "change";

protected var percentage:Number;
/**
* Read-Only
*/
public function get percent():Number
{
return percentage;
}

/**
* Constructor
*/
public function SliderEvent( type:String, percent:Number )
{
super( type );
percentage = percent;
}
}
}
[as/]

Y luego viene esto para las classes de los textos y contenidos:

[as]
ScrollContent

package
{
import flash.display.Sprite;
import flash.geom.Rectangle;

public class ScrollContent extends Sprite
{
// elements
protected var content:Sprite;
protected var scrollbar:Scrollbar;
protected var contentHeight:Number;

/**
* Constructor
*/
public function ScrollContent( clip:Sprite, scroller:Scrollbar, scrollRect:Rectangle )
{
content = clip;
contentHeight = clip.height;
content.scrollRect = scrollRect;

scrollbar = scroller;

scrollbar.addEventListener( SliderEvent.CHANGE, updateContent );
}

public function updateContent( e:SliderEvent ):void
{
var scrollable:Number = contentHeight - content.scrollRect.height;
var sr:Rectangle = content.scrollRect.clone();

sr.y = scrollable * e.percent;

content.scrollRect = sr;
}
}
}
[as/]



y el del scrollbar que es la barra o el eje:

[as]
Scrollbar

package
{
import flash.display.Sprite;
import flash.events.MouseEvent;

public class Scrollbar extends Sprite
{
// elements
protected var slider:Slider;
protected var up_arrow:Sprite;
protected var down_arrow:Sprite;

protected var scrollSpeed:Number = .1;

// read/write percentage value relates directly to the slider
public function get percent():Number { return slider.percent; }
public function set percent( p:Number ):void { slider.percent = p; }

/**
* Constructor
*/
public function Scrollbar()
{
createElements();
}

// executes when the up arrow is pressed
protected function arrowPressed( e:MouseEvent ):void
{
var dir:int = (e.target == up_arrow) ? -1 : 1;
slider.percent += dir * scrollSpeed;
}

/**
* Create and initialize the slider and arrow elements.
*/
protected function createElements():void
{
slider = new Slider();

up_arrow = new Sprite();
up_arrow.graphics.beginFill( 0x666666, 1 );
up_arrow.graphics.drawRect( 0, 0, 10, 10 );
up_arrow.graphics.endFill();

down_arrow = new Sprite();
down_arrow.graphics.beginFill( 0x666666, 1 );
down_arrow.graphics.drawRect( 0, 0, 10, 10 );
down_arrow.graphics.endFill();

slider.y = up_arrow.height;
down_arrow.y = slider.y + slider.height;

up_arrow.addEventListener( MouseEvent.MOUSE_DOWN, arrowPressed );
down_arrow.addEventListener( MouseEvent.MOUSE_DOWN, arrowPressed );

addChild( slider );
addChild( up_arrow );
addChild( down_arrow );
}

/**
* Override the add and remove event listeners, so that SliderEvent.CHANGE events will be
* subscribed to the Slider directly.
*
* There is issues with this however, Event.CHANGE events will get subscribed directly too Slider as well.
*/
public override function addEventListener( type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false ):void
{
if ( type === SliderEvent.CHANGE )
{
slider.addEventListener( SliderEvent.CHANGE, listener, useCapture, priority, useWeakReference );
return;
}
super.addEventListener( type, listener, useCapture, priority, useWeakReference );
}
public override function removeEventListener( type:String, listener:Function, useCapture:Boolean=false ):void
{
if ( type === SliderEvent.CHANGE )
{
slider.removeEventListener( SliderEvent.CHANGE, listener, useCapture );
return;
}
super.removeEventListener( type, listener, useCapture );
}
}
}
[as/]


Suena medio complejo hacer un scroll no creen?? SIn usar el componente ScrolU... Alguna sugerencia? Gracias

Es una clase lo que tienes, es de AS3, así que no te funcionará con AS2 y si no posteas el código con formato es casi imposible de leer.

como se respond econ formato? Hay algún boton para abrir la ventana amarilla? Gracias

es en donde pone
[code]
y
[code/] me imagino

Mañana por la mañana restructurare mi pregunta. El código parece estar bién, es tan largo que me cuesta un poco acomodarlo de manera correcta. Gracias

Código :

[code]
//Para código en general
[/code]

[as]
//Para action script
[/as]

[html]
//Para html
[/html]

[php]
//Para php
[/php]

[js]
//Para javascript
[/js]

Porfavor olviden todo el código y confusión anterior. Estoy tratando de hacer un ScrollBar que comos aben es diferente a un slider. Lo que no se es en que componente gráfico colocar el siguiente código. Según yo este código va sobre la barra que se dibuje:

Código :

package
{
import flash.display.Sprite;
import flash.events.MouseEvent;

public class Scrollbar extends Sprite
{
// elements
protected var slider:Slider;
protected var up_arrow:Sprite;
protected var down_arrow:Sprite;

protected var scrollSpeed:Number = .1;

// read/write percentage value relates directly to the slider
public function get percent():Number { return slider.percent; }
public function set percent( p:Number ):void { slider.percent = p; }

/**
* Constructor
*/
public function Scrollbar()
{
createElements();
}

// executes when the up arrow is pressed
protected function arrowPressed( e:MouseEvent ):void
{
var dir:int = (e.target == up_arrow) ? -1 : 1;
slider.percent += dir * scrollSpeed;
}

/**
* Create and initialize the slider and arrow elements.
*/
protected function createElements():void
{
slider = new Slider();

up_arrow = new Sprite();
up_arrow.graphics.beginFill( 0x666666, 1 );
up_arrow.graphics.drawRect( 0, 0, 10, 10 );
up_arrow.graphics.endFill();

down_arrow = new Sprite();
down_arrow.graphics.beginFill( 0x666666, 1 );
down_arrow.graphics.drawRect( 0, 0, 10, 10 );
down_arrow.graphics.endFill();

slider.y = up_arrow.height;
down_arrow.y = slider.y + slider.height;

up_arrow.addEventListener( MouseEvent.MOUSE_DOWN, arrowPressed );
down_arrow.addEventListener( MouseEvent.MOUSE_DOWN, arrowPressed );

addChild( slider );
addChild( up_arrow );
addChild( down_arrow );
}

/**
* Override the add and remove event listeners, so that SliderEvent.CHANGE events will be
* subscribed to the Slider directly.
*
* There is issues with this however, Event.CHANGE events will get subscribed directly too Slider as well.
*/
public override function addEventListener( type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false ):void
{
if ( type === SliderEvent.CHANGE )
{
slider.addEventListener( SliderEvent.CHANGE, listener, useCapture, priority, useWeakReference );
return;
}
super.addEventListener( type, listener, useCapture, priority, useWeakReference );
}
public override function removeEventListener( type:String, listener:Function, useCapture:Boolean=false ):void
{
if ( type === SliderEvent.CHANGE )
{
slider.removeEventListener( SliderEvent.CHANGE, listener, useCapture );
return;
}
super.removeEventListener( type, listener, useCapture );
}
}
}

Después para el contenido de la ventana del scroll se escribe el siguiente código:
[/code]
package
{
import flash.display.Sprite;
import flash.geom.Rectangle;

public class ScrollContent extends Sprite
{
// elements
protected var content:Sprite;
protected var scrollbar:Scrollbar;
protected var contentHeight:Number;

/**
* Constructor
*/
public function ScrollContent( clip:Sprite, scroller:Scrollbar, scrollRect:Rectangle )
{
content = clip;
contentHeight = clip.height;
content.scrollRect = scrollRect;

scrollbar = scroller;

scrollbar.addEventListener( SliderEvent.CHANGE, updateContent );
}

public function updateContent( e:SliderEvent ):void
{
var scrollable:Number = contentHeight - content.scrollRect.height;
var sr:Rectangle = content.scrollRect.clone();

sr.y = scrollable * e.percent;

content.scrollRect = sr;
}
}
}

[/code]

El "Rectangle" esta utilizado como mascara en este caso. El Chini, este es AS3, porque dices que no me va a funcionar? Estoy trabajando con Flash CS3 Professional. Crees que me estoy complicando mucho? Gracias por su opinión? Lo estoy probando todavia, lo que pasa es que no logro ejecutarlo porque no se como acomodar el AS. Después dice que se puede ver el ejemplo de scrollbar con el código:

Código :

package {
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Rectangle;

public class ScrollbarExample extends Sprite
{
public function ScrollbarExample()
{
var content:Sprite = new Sprite();
var scrollbar:Scrollbar = new Scrollbar();
var scroll_rect:Rectangle = new Rectangle( 0, 0, 100, 50 );

content.graphics.beginFill( 0xFF0000, 1 );
content.graphics.drawRect( 0, 0, 100, 50 );
content.graphics.beginFill( 0x00FF00, 1 );
content.graphics.drawRect( 0, 50, 100, 50 );
content.graphics.beginFill( 0x0000FF, 1 );
content.graphics.drawRect( 0, 100, 100, 50 );
content.graphics.endFill();

var rect:Rectangle = new Rectangle( 0, 0, 100, 50 );
var sc:ScrollContent = new ScrollContent( content, scrollbar, rect );

scrollbar.x = content.width;

addChild( content );
addChild( scrollbar );
}
}
}

Es tanto código qu eme pierdo en el proceso. Al final creo que el primer código va en el gráfico que represente la barra sobre la cual se desplaza, lo siguiente va en una caja de texto dinámico¿?¿? Según yoo eso sería lo que dice. No me sale. gracias

El segundo código que no aparece bién en el post anterior es el que va en el contenido de a lo que se va a hacer scroll, por lo que pienso que va en una caja de texto dinámico.

Código :

package
{
import flash.display.Sprite;
import flash.geom.Rectangle;

public class ScrollContent extends Sprite
{
// elements
protected var content:Sprite;
protected var scrollbar:Scrollbar;
protected var contentHeight:Number;

/**
* Constructor
*/
public function ScrollContent( clip:Sprite, scroller:Scrollbar, scrollRect:Rectangle )
{
content = clip;
contentHeight = clip.height;
content.scrollRect = scrollRect;

scrollbar = scroller;

scrollbar.addEventListener( SliderEvent.CHANGE, updateContent );
}

public function updateContent( e:SliderEvent ):void
{
var scrollable:Number = contentHeight - content.scrollRect.height;
var sr:Rectangle = content.scrollRect.clone();

sr.y = scrollable * e.percent;

content.scrollRect = sr;
}
}
}

Gracias por su ayuda. Perdón por la confusión.

No puedo!!! Si alguno de los buenazos pudiera hecharle un ojo a este link y hecharme una mano se los agradecería:

http://www.kirupa.com/forum/archive/index.php/t-245468.html

Esta en inglés pero creo que se puede entender fácil el idioma, lo que no entiendo es el código. Al intentarlo en un ejemplo simple me dice que los "packages" no pueden ser anidados. Grax.

Porfavor borren este post y lo vuelvo a poner, tiene demasiadas cosas inútiles al principio y se vuelve confuso. Lo único es que quiero aplicar el código que encontré en este link:

http://www.kirupa.com/forum/showthread.php?t=245468 y ver si alguien me puede ayudar a interpretarlo, Gracias moderadores. Ayudenme a deshacerme de toda la m... que escribí

No es que no te sirva, sino que está en AS3 y por lo tanto si lo utilizas debes hacer tu aplicación completa en AS3, a diferencia de AS2 que se podía intercalar con AS1. Por lo tanto tienes que empezar a trabajar con clases, olvida lo de aplicar un código en un objeto, esto ya no se utiliza en AS3, debes hacer una clase principal llamada "document Class" y dentro de esta hacer todas las relaciones entre las demás clases de tu proyecto.

Yo te recomendaría, ya que estás empezando, que escojas hacer tus aplicaciones en AS2, te irá mejor para aprender.

Gracias elchini, lo voy a mantener simple mejor. Creo que meterme con clases y eso me va a traer mas problemas a la larga.