Somewhere around two years ago (really? Wow, it’s been a while), we got our first builds of the new flash player and flex framework up and running. To celebrate, I took a crack at building one of my favorite flash components in flex, the Book component. I got some basic proof of concept up and running, but had to set it aside amid the day to day details of getting Flex 2 built.
Well a few weeks ago, I dug the old code out and polished it up. So here, for your enjoyment, is the FlexBook component.
FlexBook can act as a container, allowing the developer to flip through its children components:
Example 1: FlexBook as a container
FlexBook can be driven by a list of data and an itemRenderer, like a List control or DataGrid. Here’s a porfolio viewer, driven by an XML data file and an MXML component itemRenderer:
Example 2: FlexBook as a List
FlexBook Supports a wide variety of configuration options. Play with some of them here:
Example 3: FlexBook’s styles and settings
FlexBook supports full transparency on its pages. This example is in honor of (and made possible by) my mom, who’s a world class medical illustrator:
Example 4: FlexBook’s transparent Anatomy
This example doesn’t show any new functionality, but it’s a nicely put together example of a dataDriven FlexBook, combined with a state/transition driven item renderer;
Example 5: FlexBook as an image browser
Here’s an example that combines the FlexBook with the Landscape Zoomer component to browse images. Turn the page until you find a picture you like, then click on the image to zoom in. Click again to zoom back out.
Example 6: FlexBook with the Landscape Zoomer
Interested in learning how FlexBuilder works? Take a peek at this walkthrough (work in progress)
A walk through the FlexBook page flip effect
The code for this component is written from scratch, using AS3, flex concepts, and player 9 functionality, but it is by no means original. The functionality is inspired by this excellent example from Macc/iparigrafika.