AS3 Mask Example
I was tasked recently with adding a way to scroll clickable buttons inside of a fixed-height UI panel for a new release of StrataLogica. I haven’t dealt much with masking in AS3 so I thought I’d post a quick example of how masking works. The idea is that you’ve got an area for buttons ( content items/whatever ), and that sometimes this area of buttons exceeds the height of the area the content must fit into. So you need some way to scroll these buttons up and down.
The biggest, most irritating thing I ran into, and that you may run into when trying to figure out masking is: empty Sprites/MovieClips will always default to a height/width of ZERO. Keep this in mind and we’ll return to it towards the end of the post.
Lets look at a visual representation of what we’re trying to accomplish.
In the image, the container holding the buttons is 170px high but we only have 100px worth of area where we can display the button list. If we create a 100px high mask and apply it to the button container, it will hide everything that is not inside of those 100px. Then, simply adding some scroll up/down buttons, we can move the button container up or down (the mask does not move once set) and it looks like we’re scrolling our list of buttons.
Read on to see the code and example FLA/SWF/ZIP