class flash.scrollPane.as 6 comments Posted: 17.7.2007 | By: zetta
Pane v1.3
- Multiples instancias
- Integración con la rueda del ratón (al parecer no funciona en MacOs X)
Clase Pane.as
- import mx.utils.Delegate;
- class Pane {
- var mask: MovieClip,
- sc1: MovieClip,
- sc2: MovieClip,
- origin: MovieClip,
- sBar: MovieClip,
- Target: MovieClip;
- var sTotal: Number,
- top: Number,
- h: Number,
- w: Number;
- var ml: Object;
- var delayer: Number;
- function Pane(clip, width, height, pos) {
- delayer = 0;
- ml = new Object();
- Mouse.addListener(ml);
- this.origin = clip;
- this.w = width;
- this.h = height;
- mask = clip._parent.createEmptyMovieClip("masking_" + clip._name, clip._parent.getNextHighestDepth());
- mask._x = clip._x;
- mask._y = clip._y;
- mask.lineStyle(1, 0x000000, 100, true, "none", "round", "miter", 1);
- mask.beginFill(0x000000);
- mask.moveTo(0, 0);
- mask.lineTo(width, 0);
- mask.lineTo(width, height);
- mask.lineTo(0, height);
- mask.moveTo(0, 0);
- clip.setMask(mask);
- sc1 = clip._parent.attachMovie("paneScrollButon", "sc1_" + clip._name, clip._parent.getNextHighestDepth());
- sc1._x = (pos == "left") ? Math.ceil(clip._x - sc1._width) : Math.ceil(clip._x + width);
- sc1._y = Math.ceil(clip._y);
- sc1.onPress = function() {
- var nombre: MovieClip = this._parent["sBar_" + this._name.substr(4, this._name.length)];
- nombre.onEnterFrame = track;
- this.onEnterFrame = function() {
- if (nombre._y > nombre._top) {
- nombre._y -= 10;
- } else {
- nombre._y = nombre._top;
- }
- };
- };
- sc1.onRelease = sc1.onReleaseOutside = function() {
- delete this.onEnterFrame;
- };
- sc2 = clip._parent.attachMovie("paneScrollButon2", "sc2_" + clip._name, clip._parent.getNextHighestDepth());
- sc2._x = (pos == "left") ? Math.ceil(clip._x - sc1._width) : Math.ceil(clip._x + width);
- sc2._y = Math.ceil((clip._y + height) - sc1._height);
- sc2.onPress = function() {
- var nombre: MovieClip = this._parent["sBar_" + this._name.substr(4, this._name.length)];
- nombre.onEnterFrame = track;
- this.onEnterFrame = function() {
- if (nombre._y < nombre._bottom) {
- nombre._y += 10;
- } else {
- nombre._y = nombre._bottom;
- }
- };
- };
- sc2.onRelease = sc1.onReleaseOutside = function() {
- delete this.onEnterFrame;
- };
- sTotal = clip.sTotal = Math.ceil(sc2._y - (sc1._y + sc1._height));
- sBar = clip._parent.attachMovie("paneScrollBar", "sBar_" + clip._name, clip._parent.getNextHighestDepth());
- sBar.Target = clip;
- sBar._x = Math.ceil(sc1._x);
- sBar._y = Math.ceil(sc1._y + sc1._height);
- sBar._height = (((height * 100) / clip._height) / 100) * height;;
- sBar.onRelease = sBar.onReleaseOutside = function() {
- this.isPressed = false;
- this.stopDrag();
- };
- var left: Number = Math.ceil(sc1._x);
- var top: Number = Math.ceil(sc1._y + sc1._height + 1);
- var bottom: Number = Math.ceil((sc1._y + sTotal + sc1._height) - (sBar._height) - 1);
- sBar._top = top;
- sBar._left = left;
- sBar._bottom = bottom;
- sBar.delayer = 0;
- sBar.isPressed = false;
- sBar.onPress = function() {
- this.startDrag(false, this._left, this._top, this._left, this._bottom);
- this.onEnterFrame = track;
- this.delayer = 0;
- this.isPressed = true;
- };
- function track() {
- var percent: Number = Math.round((this._y - this._top) * 100) / (this._bottom - this._top);
- var nombre: MovieClip = this._parent[this._name.substr(5, this._name.length)];
- var mask: MovieClip = nombre._parent["masking_" + nombre._name];
- var diff: Number = nombre._height - mask._height;
- var newVal = ( - ((diff * percent) / 100)) + mask._y;
- nombre._y += (newVal - nombre._y) * 0.4;
- this.delayer = this.isPressed == false ? this.delayer + 1 : this.delayer;
- if (this.delayer == 10) {
- delete this.onEnterFrame
- }
- }
- ml.onMouseWheel = Delegate.create(this, wheel);
- }
- private function _track() {
- var percent: Number = Math.round((sBar._y - sBar._top) * 100) / (sBar._bottom - sBar._top);
- var diff: Number = origin._height - mask._height;
- var newVal = ( - ((diff * percent) / 100)) + mask._y;
- origin._y += (newVal - origin._y) * 0.4;
- delayer++;
- if (delayer == 10) {
- delete sBar.onEnterFrame
- }
- }
- private function wheel(delta) {
- var ob: MovieClip = this.origin._parent;
- var obj: MovieClip = this.mask;
- if (ob._xmouse > = obj._x && ob._xmouse < = obj._x + this.w && ob._ymouse > = obj._y && ob._ymouse < = obj._y + this.h) {
- delayer = 0;
- if (delta < 0) {
- sBar.onEnterFrame = Delegate.create(this, _track);
- if (sBar._y + 25 < sBar._bottom) {
- sBar._y += 25;
- } else {
- sBar._y = sBar._bottom;
- }
- } else {
- sBar.onEnterFrame = Delegate.create(this, _track);
- if (sBar._y - 25 > sBar._top) {
- sBar._y -= 25;
- } else {
- sBar._y = sBar._top;
- }
- }
- }
- }
- public function is() {
- return true;
- }
- public function die() {
- this.mask.removeMovieClip();
- this.sBar.removeMovieClip();
- this.sc1.removeMovieClip();
- this.sc2.removeMovieClip();
- }
- public function hide() {
- this.mask._visible = false;
- this.sBar._visible = false;
- this.sc1._visible = false;
- this.sc2._visible = false;
- this.origin._visible = false;
- }
- public function show() {
- this.mask._visible = true;
- this.sBar._visible = true;
- this.sc1._visible = true;
- this.sc2._visible = true;
- this.origin._visible = true;
- }
- public function reset() {
- sBar._x = Math.ceil(sc1._x);
- sBar._y = Math.ceil(sc1._y + sc1._height);
- origin._y = sc1._y;
- show();
- }
- public function resize() {
- sBar._height = (((h * 100) / origin._height) / 100) * h;
- sBar._left = Math.ceil(sc1._x);
- sBar._top = Math.ceil(sc1._y + sc1._height + 1);
- sBar._bottom = Math.ceil((sc1._y + sTotal + sc1._height) - (sBar._height) - 1);
- }
- }
Uso
- var newPane:Pane = new Pane(clip:MovieClip, Width:Number, height:Number, type:String);
Donde:
- clip => MovieClip que se enmascarará
- width => Ancho del cuadro a crear
- height => Alto del cuadro a crear
- type => De que lado estara la barra de scroll (left / right)
Métodos
- is:BooleanDevuelve verdadero en caso de existir la instancia
- hide:VoidOculta el objeto Pane
- show:VoidVuelve a mostrar el objeto Pane
- reset:VoidRegresa el scrollbar al inicio (arriba)
- resize:VoidRegenera el tamaño del scroll (útil en contenido dinámico)
Tags: Flash, actionscript, class, flash, scroll, scrollPane
Uuuy! Excelente bro, muchas gracias, que bueno que te animaste a armar ctrl-zeta!
Grande maestro!!! Era justo lo que estaba necesitando para resolver un CD interactivo. Pero tengo un problema. Estoy poniendo en el MC “contenido” un cuadro de texto estático (porque le tengo que dar formato y vínculos) que mide más de 2000 px de alto. El problema es que llego hasta un punto con el scroll y de ahí para abajo, si bien sigue scrollando, no me muestra el texto que debería scrollar. Hay algún lugar donde se limite el largo del MC que scrollea?
Si me pudieras ayudar, me harías un gran favor.
Y gracias desde ya por la clase!
@Gerardo!
Que gusto que te haya servido la clase =)
Lo que me comentas es un “bug” que tambien me ha pasado, resolverlo no he podido, pero hay forma de “truquearlo”, simplemente no crees uno solo cuadro de texto, sino mas bien crea varios, mas o menos donde se corte el contenido, cortalo y crea otro nuevo y ahi pon el resto. solo asi se desplegará todo el contenido.
Despues de muuuuuuuucho contenido ocurre otro bug, que despliega la informacion bien rara =P pero ese si ya no he podido solucionarlo jeje
Te cuento que poniendo texto dinámico logré meter mucho texto en un solo scroll y me funcionó de maravilla. Después de di formato poniéndole al texto. Y cuando ya era demasiado, creé unos botones que cargan en un nivel superior un hermoso parche que tapa el texto anterior y te muestra el tema nuevo ;=)
Felicitaciones por la clase! Y gracias por la ayuda!
Ah, me olvidé de algo. Necesito manejar la cantidad de líneas de texto que me suben o bajan los botones, que como está en cuerpo 14 a veces se hace medio dificil controlar que no se me vaya demasiado para arriba el texto y me pierda en la lectura. Me podrás indicar donde hago que suba o baje menos líneas de texto?
Gracias otra vez
( ya corregi el codigo, no me habia dado cuenta que no estaba identado =P)
Si te das cuentas en las lineas 41 y 58
nombre._y += 10; y nombre._y -= 10;
Cambia esos valores (10) para hacer que suba y baje dependiendo de lo que necesites
Tenia una version mas padre de este scroll, me voy a poner a buscarla que de hecho también la usé en un CD interactivo,
=)