Open Source Flex Component: ZoomFrame

In the spirit of open source and sharing, I plan to release several free Flex components within the coming months. These components I’ve built in my free time, often just for fun or because I thought they would be useful. The first component I’m releasing is named ZoomFrame. Basically, it wraps a frame (styled like any other Flex border) around any DisplayObject. This frame lets you zoom in and out of and align the object it wraps along any of the frame’s edges, corners, or directly in the center. For a better idea of how this component behaves, play with all the controls in the ZoomFrame component demo.

Screenshot of Zoom Frame Component Example

The idea for ZoomFrame simply popped into my head one night, and I spent a couple of hours implementing it and perfecting its behavior. This component isn’t complex, but due to its simplicity, I would highly recommend digging into the source code if you’re just getting started developing Flex components with ActionScript. Important core pieces for building a custom component are there:

  • Invalidation and validation of properties, size, and the display list.

  • Initializing default styles and a styleChanged() function.

The only thing missing is a createChildren() function because I do not need to add any children to the display list when the component first initializes.

Of course, full source code for ZoomFrame is available, and it’s under the MIT license, so feel free to use this component in both commercial and open source projects. Stay tuned. This is the first component of many I plan to release.

About Josh Tynjala

Josh Tynjala is a frontend developer, open source contributor, bowler hat enthusiast, and karaoke addict. You might be familiar with his project, Feathers UI, an open source user interface library for Starling Framework that is included in the Adobe Gaming SDK.

Discussion

  3. Tim

    I noticed you update the content in the commitProperties() call. Now, I am new to AS3 component development, but I think I would have classified that as a display list action, so would have been tempted to put that code in updateDisplayList().

    Can you give any insight into why commitProperties() is more appropriate (or if it’s just personal taste)? I also noticed you never call invalidateDisplayList(). Does that occur within the Flex framework when you call addChild()? Or is updateDisplayList() just not running more that once?

    Thanks,
    Tim

  4. Josh Tynjala

    Thanks, Peter. That’s not necessarily part of the ZoomFrame component itself. I just dropped in a regular <mx:Image/> component in as the content.

    Tim, it’s generally a good idea to add or remove children in commitProperties(). In my experience, adding or removing children will happen because there has been a property change. That’s the exact purpose of commitProperties(). The updateDisplayList() function is for sizing and positioning children and drawing to the display list. If you wanted to add children immediately before you try to get their size information, you’d have to force them to validate first, so by doing it in commitProperties(), you take advantage of the Flex framework handling this detail at an optimal time.

    I’m not sure why I didn’t call invalidateDisplayList(). It must have worked fine without that because I remember doing a lot of testing. Regardless, I updated the source code to properly invalidate all three when the content or scale changes. Looking over the code, it appears both properties can affect more than I originally planned. I’ve also discovered that I didn’t implement anything in createChildren(), so I removed that function. I believe I originally did not extend ScrollControlBase, which provides the border, so I had to create the border myself in createChildren().

  5. Pingback:   List of 31 Flex APIs, Libraries, Components and Tools by Sean // the flash guy

  6. Pingback: MadeInFlex » Blog Archive » Componente zoomframe

  7. Pingback: Open Source Flex Components: AdvancedList and CheckBoxList - Zeus Labs

  8. Sean Baker

    Hi Josh,

    I’m trying out ZoomFrame. It really needs scroll bars for me to use it. How do I add scroll bars?

    Thanks,

    Sean.

  9. Josh Tynjala

    Sean, good question. I subclassed ScrollControlBase, so it looks like I intended to include scrollbars, but I forgot to do the implementation. I can’t spend time now looking at all the details, but it looks like setScrollBarProperties() needs to be called so that the control knows how big the content has become, probably in commitProperties(), but maybe in updateDisplayList(). Then horizontalScrollPolicy and verticalScrollPolicy need to be set to ScrollPolicy.AUTO or ScrollPolicy.ON.

  10. Josh Tynjala

    In response to Sean Baker’s request, I’ve added support for scroll bars. Links updated to point to new source and the example now demonstrates the scroll bars with the new default scroll policy of “auto”.

  11. Pingback: Open Source Flex Component: PopUpThumbnail - Josh Talks Flash

  12. Pingback: Open Source Flex Component: PopUpInitializer - Josh Talks Flash

  13. Pingback: FlexLib component list y más « El hoyo funky

  14. Silva

    Hi Josh,
    Thanks for sharing this. Can we use it to zoom any other flex component like say a chart or a grid etc????