The design of these widgets was inspired by the Mac OS X Dashboard widgets, which exhibit a similar flipping behavior.
The code for these examples is based heavily on the Card Flip example on this site. The main difference is that my code allows you to use any Flash object or image, instead of requiring a bitmap. This opens up the possibility of using the back for controls which affect the display on the front, as in the second example, or for the entire widget to contain controls that affect some other part of a larger Flash application.
The childContentFront and childContentBack Sprites will contain the Flash content of the front and back of the widget, respectively. In order to change the front and back, you need to add and remove children on these two Sprites. You can set up the initial view state using the getFront and getBack methods, near the bottom of the .as file. After that, you can add custom event handler classes to handle events on any objects contained in the widget and update the display accordingly. (This is shown in the methods addRemoveMarket, addRemoveAverages, and setTimeSpan in WidgetFlip.as, at the bottom of the file.)
Then, when you click on the 'information' icon in the lower right corner, the code will take a snapshot of the current contents of each side, and write that into a bitmap. The contents will be swapped out with the bitmap image, which will then be processed as in the CardFlip tutorial. (In a nutshell, the code slices these bitmaps into 1-pixel wide vertical slices, which are then scaled and moved to create the distortion for perspective while the card is rotating.) When the rotation is complete, the bitmap on each side will be swapped back with the actual Flash content. Since the bitmap is recaptured every time, any changes that you make to the contents of the side will be accurately reflected every time it flips.
The ActionScript files are marked with '//CHANGE' on every section that you would need to change in order to customize the widget for yourself. I suggest doing a find on 'CHANGE' to get a sense of what parts of the code you would need to alter. The rest of the comment will then explain what the code does, and how you should change it to suit your design.
A note about sizes: You'll want the .swf file to have slightly larger dimensions than the picWidth and picHeight that you set in the code, because as the widget rotates it will grow vertically. The amount of grow depends on what value you give to fLen, the focal length variable.
Some ideas for usage in websites:
- Display data on the front, configuration or customization controls on the back (as in Example 2)
- Charts and graphical data on the front, tabular data on the back (as in Example 1)
- Summary information on the front, more in-depth information on the back.
- 'Basic' options on the front, 'Advanced' options on the back
Acknowledgments: I would like to acknowledge and thank Andrew Karetas for conversations which led to this approach, and for answering lots and lots of questions about Flash and ActionScript.
Download
- Download all 'as' and 'fla' files corresponding to this tutorial: widgets.zip
