Simple AS3 Scrollbar

March 3rd, 2009

UPDATE: Scrollbar AS3: Scrollbase Class [Updated]

Hi for all, here i post a simple way that i always use to scroll movieclip content into AS3 projects.  I created this classe to scroll content using simple four movieclips: a content movieclip, maskmovieclip, dragger clip and background scroll clip.

First see the working example bellow:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

It’s so simple to use this scrollbar, here the document class of this upper example:

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import com.dLibs.utils.scrollbase;
 
	public class main extends MovieClip
	{
		private var scrollMovieclip:scrollbase;
 
		public function main():void
		{
			stage.align = StageAlign.TOP;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			// @ Creating the scrollbas
			scrollMovieclip = new scrollbase(conteudo,contenMask,drag,scrollbar);
		}
	}
}

To use it changing the content data, and for this the content height, you have one public function to verify if is necessary the scroll bar, and if isn’t necessary it will be invisible at you make a new verify. Alway when you change the content of the movieclip you need call the function verifyHeight() with your scrollbase object, like this:

scrollMovieclip.verifyHeight()

This is will hide or show your scroll dragger and background if your content height is bigger or not at movieclip mask, its really so simple.

You can too increase the space of bottom when you scroll down all your dragger, is only you put one more variable in scrollbase object:

scrollMovieclip = new scrollbase(conteudo,contenMask,drag,scrollbar,50);

Download this sample and scrollbase classe clicking here or you can download full classes in my SVN repository: http://asdatalibs.googlecode.com/svn/trunk/

The unique requirement to use this class is: you need have TweenLite class too, you can download it at: http://blog.greensock.com/tweenliteas3/

Thanks for reading and see you soon here at the same channel XD.

Escrito por: Pablo Davi e Gravado em: ActionScript 3, dLibs, Flash, Source 6 Comments »

Related Posts

6 Responses to “Simple AS3 Scrollbar”

  1. erik Says:
    April 28th, 2009 at 10:12

    Nice thing! Thanks dude! A little thing to improve the scrolling:
    add “overwrite:1″ as a TweenLite property, so it wont lag on all actively running TweenLite animations. It will run smooth when cleaning up all running animations :-)

    TweenLite.to(_content, .5, { y : _contMask.y + ( ( _contMask.height – _content.height – _padding ) / 100 ) * scrollPercent, overwrite:1, ease:Cubic.easeOut });

  2. erik Says:
    April 28th, 2009 at 10:15

    Also, it needs a dispose() or kill() method to clean up listeners. It’s missing that at the moment.

    public function dispose():void
    {
    _dragger.removeEventListener(MouseEvent.MOUSE_DOWN, moveDrag);
    _dragger.parent.stage.removeEventListener(Event.ENTER_FRAME, moveContent);
    _dragger.parent.stage.removeEventListener(MouseEvent.MOUSE_UP, releaseDrag);
    }

  3. Pablo Davi Says:
    April 29th, 2009 at 10:33

    Hi Erick, sorry for the delay. Im working with other scrollbar class and soon i will post here the update class and i will consider your reply and in thanks in advance: )

  4. flashmad Says:
    September 23rd, 2009 at 01:36

    Thanks. i need this for my current office project.

  5. About Brittany Murphy Says:
    December 25th, 2009 at 18:46

    Great post i liked it! I am going to add it to my rss feeds.

  6. the best nanotechnology stocks Says:
    March 3rd, 2010 at 20:12

    The site has nice and unique wordpress templates.

Leave a Reply