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.
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.
Thanks for sharing. Long live the MIT license.
Looks good. You should also enable smoothing to avoid that blocky look when the image is any size other than original.
See http://weblogs.macromedia.com/mc/archives/2006/09/enable_smoothin.cfm.
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
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().
[...] ZoomFrame http://www.zeuslabs.us/2007/08/14/open-source-flex-component-zoomframe/ [...]
[...] al que escalamos de manera que el escalado se hace desde cualquier extremo o desde el centro. Componente Zoomframe 0 [...]
[...] ZoomFrame component for Flex that I released last month got some good buzz. Today, I’m ready to release two more Flex [...]
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.
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 incommitProperties(), but maybe inupdateDisplayList(). ThenhorizontalScrollPolicyandverticalScrollPolicyneed to be set toScrollPolicy.AUTOorScrollPolicy.ON.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”.
[...] is available as part of the common documentation with my other “Flex Toolbox” controls like ZoomFrame and CheckBoxList. As with most of my other open source code, PopUpThumbnail is available under the [...]
[...] is available as part of the common documentation with my other “Flex Toolbox” controls like ZoomFrame and PopUpThumbnail. As with most of my other open source code, PopUpInitializer is available under [...]
[...] http://joshblog.net/2007/08/14/open-source-flex-component-zoomframe/ [...]
Hi Josh,
Thanks for sharing this. Can we use it to zoom any other flex component like say a chart or a grid etc????
Josh i applied it to a component and it works fine.
How do i apply it to multiple components????