Saturday, February 14, 2009

Scroll Panel Component (AS3 - Scroll Bar)

Its always a goal of mine to try to write code as re-usable as possible during each project. The extra time and thought put into the current project should make the next one that much easier. With the recent Precise Path project I was able to come away with a few different components. The main one, at least the one that is most applicable, is a Scroll Panel component. Basically you will just need to make a ScrollBar (which is just a movieclip for the track and one for the handle), a displayObject for the mask, and a displayObject that will contain the content to be masked. I took some time this morning to throw together a quick and dirty example which you can find here.

As you can see, clicking on the 3 different buttons at the top will drop in different text into the main text box. If the text is too small and doesn't need to be scrolled then the scroll bar will disappear. Otherwise, the scroll bar will check the height of the content and compare it to the mask and scroll the text accordingly. It does not have to be text... it can be any displayObject, this is just a simple example I came up with. You can find some more complicated examples in the Precise Path project.

I haven't given away any code since July.... doh! So I am long overdue. Check out the example zip file if you would like to use the component. It contains the appropriate classes and FLA example.

Feel free to use the component in any commercial project and what not. I apologize for any bugs that may be buried in it... I've only used it in one project so far so it is far from fully tested. But that is what you get for free :)

If you make any improvements on it, feel free to post below.


Tink said...

Any reason for not using the TextArea components included with Flash CS3/CS4 or Flex?

The concept of components is to create re-usable code, this particular component has been built for both Flash and Flex, so what made you decide to rebuild it, instead of going along with the concept of re-using something that is already done (and done pretty well IMO)?

Ickydime said...

Good question. This component is much more in line with the ScrollPane than the TextArea since it handles any displayObject... not just textfields.

The built in components work for a lot of people, and there is nothing wrong with that... but I've always been one to write my own.

I'm not a big fan of the built in components for a few reasons:
1. They usually add in a bunch more features than I need. I like to make a bare bones component that I can extend.
2. Skinning seems to be a pain. I prefer to take my designer's comp and name the track and the handle and be done.
3. The components I have tried seem to be restrictive. Too much of it is set in stone and you can't go into the code and tweak it.

In this component, all you have to do is name a few MovieClips and have them target the correct classes and away you go. Just call refresh when there is a resize and the Panel handles all of your scrolling.

In summary, I don't expect this to take the place of the built in scroll component. But it is nice to have another option... one that you can extend, tweak, and easily skin.

Tink said...

Maybe you've been tainted by the V1 components, which i can totally understand!

The current ones are pretty decent (and the Flex ones are solid), very easy to skin (double click and edit the graphics), and most methods are protected so you can extends them and add your own functionality.

A small amount of time investing in learning how they work, will save you so much time in future projects.

Course they have functionality you may not require, as they are built for many situations, but if you don't required it you can ignore it or override it to remove it.

Anonymous said...

Hi I have a question:
I´ have a MC (pages) inside another MC (wholemenu)

this is the root:
root>MC wholemenu>MC pages

I´d tried to load your scroll panel into MC (pages) in a specific frame but it doesn´t work.

I´m using as3

Could you help me?


Ickydime said...

If you are putting code within the timeline I am a bit wary to help. I highly recommend trying to get your code in some external AS classes and remove any timeline scripts besides things such as stop();

You may, however, have better luck listening to Tink and using the components built into Flash. I am sure they are more polished and easier to pickup than the one I created.