FlexBook

FlexBook

March 5th, 2007

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.

Questions, Comments, Feedback, Kudos or Criticisms? As always, it’s very much appreciated. Leave them here.

Enjoy!