When I started the Building an AS3 component framework series I made it clear that I wasn't going to be producing yet another set of common Flash UI components. The point of the exercise is to discuss the concepts, strategy and architecture challenges that you meet along the way.

Even with that in mind, the requirement for a NextPreviousButton component is certainly open for debate - two buttons would probably suffice. What it does allow though, is for me to look at the benefits of object composition. What I hope to show here is how easy it is to build more complex components by re-using existing simpler ones.

The functionality
The functionality I hope to achieve is this: To be able to drag the component from the library onto the stage inside the Flash IDE. I then want to be able to resize it using the usual transform tools. When compiled the component should then redraw itself correctly during initialisation. I want the next and previous buttons to remain at their original size but they should be spaced at the extremes of the stage-sized component. The button hit areas however should extend out so that they cover one half of the area between them.

This post previously contained Flash content.

NextPreviousButton demo

The structure
Instead of building a more complicated version of the AnimatedButton class that tries to manage two sets of states, I'm instead going to use two existing AnimatedButtons inside this class. The AnimatedButtons take care of all the hit and redraw stuff and the NextPreviousButton only has to take care of layout and events, so the code is really simple and contained.