Introduction[]
FlexBook is an interactive container for online publications. It was written by Ely Greenfield as an experiment with Adobe's Flex framework in early spring of 2007. Users of FlexBook can "flip through" pages of media-rich content (text, pictures, audio recordings, videos and interactive forms/charts) similar to flipping through a physical book. FlexBook beautifully illustrates the effect of turning from page to page, rendering a page and its reverse as the user pulls at page corners with the mouse. Greenfield proves that the way we display transitions between content can be as important as the content itself. For an example of FlexBook, click here.
Flash and Flex[]
FlexBook is a Flash application built in the Flex development framework. Traditionally, developers used the Adobe Flash IDE to build Flash applications. The Flash IDE offers visual tools for drawing symbols and editing animation timelines. Developers can add program functionality through the ActionScript scripting language, which is based on the same ECMAscript standard as JavaScript. The Flash IDE was originally developed for animation, and as such is well suited for character or linear animations with limited user interactivity.
As project complexity and user interactivity increased, the Flash IDE became limiting and a more programmer-centric development environment was required. Adobe released Flex as a new tool for Flash application development. Flex provides developers with a framework of extensible classes, including visual components and two programming languages:
- MXML: an XML-based markup language for visual layout of the application
- ActionScript for logic and program functionality
Flash Application Development
Applications written in MXML and ActionScript are compiled into a Shockwave Flash (SWF) file that resides on the server. A simple snippet of Javascript (automatically generated during the compilation) sends the SWF file to the client computer when the webpage hosting the Flex application is loaded. The SWF file is then executed locally by the Flash player plug-in installed in the client browser.
Portability[]
Since FlexBook runs entirely on the Flash browser plug-in, the developer does not need to be concerned with the quirks of individual browsers. FlexBook will execute the same in any browser with a Flash plug-in installed. Even if platform-dependent quirks arise, they are a problem for the implementers of the Flash plug-in, not for developers of Flash applications.
How it Works[]
Overall Structure[]
The FlexBook class has two main parts:
- A data portion, storing all of the pages in the book
- A display portion, which displays the current page and the page-flipping effect
The display portion consists of:
- An "Interaction Layer" (Sprite), which handles mouse events through event listeners
- A "Flip Layer" (Shape), which we use to draw filled bitmaps representing the page-flip effect
- The current FlexBookPage, representing a two-page spread of the current left and right pages
- A similar FlexBookPage for each of the previous (back folding) and next (front folding) set of pages
FlexBook overrides UIComponent, the base class for all visual components of Flex. This means that other Flex components can be added to it, and we can interact with it like any other Flex object (for example, we can set styles). A simple FlexBook in MXML might look something like:
<FlexBook>
<cover>
<LetterPage text="front" backgroundColor="#000000" color="#FFFFFF" />
</cover>
<backCover>
<LetterPage text="back" backgroundColor="#000000" color="#FFFFFF" />
</backCover>
<LetterPage text="A" backgroundColor="#FF9A16" color="#FFFFFF" />
<LetterPage text="B" backgroundColor="#1146C4" color="#FFFFFF" />
<LetterPage text="C" backgroundColor="#16C411" color="#FFFFFF" />
<LetterPage text="D" backgroundColor="#C41132" color="#FFFFFF" />
</FlexBook>
The Page Flip Effect[]
Here is an overview of how the page flip effect works
Step 1: Current Pages[]
The four pages A, B, C, and D
- FlexBook retrieves the display objects to render from its list of pages
- The current page contains the current left and right display objects
- The back turning page contains the left and right display objects of the previous page
- the front turning page contains the left and right display objects of the next page
- FlexBook decides which left and right pages it should render based on state (are we in a page turn, and if so, on which side?)
Step 2: Add Overlays[]
Active areas of the interaction layer
- FlexBook adds a Sprite as an "Interaction Layer" to capture mouse events
- Any visible, filled area will fire events if an event handler is registered
- FlexBook fills the four corner rectangles in the Interaction Layer to register mouse events
- FlexBook sets their alpha to 0 to make them transparent (rather than setting visible="false")
- FlexBook also adds a Shape as a "Flip Layer" on which to render the flip effect
Step 3: Flip Page[]
On click, change active page
- When the user clicks on a page, change to display the page below it (In this case, show "D" instead of "B")
- Set the current state to be turning
- All effects of the page actually turning are rendered on the Flip Layer overlay
Step 4: Some Geometry[]
Geometry for the page animation
- We keep track of the current mouse position through a mouse move event
- Calculate the vector A from the closest corner to the current mouse point
- Bisect the vector with one perpendicular to it, vector B
- The polygon formed by the current mouse point, and the two points where vector B intersects the page edges is the area occupied by the reverse side of the turning page ("C")
Step 5: Transformation[]
Transform the back page
- Create the transformation matrix that transforms the page on the other side of the turning page ("C") to have its corner at the current mouse point
- The edges of the page ("C") should line up with the polygon created in Step 4
Step 6: Bitmap Fill[]
Draw inside the flip layer
- Create a bitmap and render page "C" into it
- Set this bitmap as the fill for a polygon, with the matrix from Step 5 applied
- Draw the polygon from Step 4 on the graphics of the Flip Layer
Step 7: Another Bitmap Fill[]
Render the current page in the flip layer
- Create a bitmapped version of page "B"
- Set this as the fill for a polygon
- Draw the polygon representing the current page on the Flip Layer
Data Loading / Caching[]
Flash allows resources to be embedded, meaning that images, movie clips, etc, can be compiled into a SWF along with the rest of a project. This means that when a user has finished downloading the flash application, these resources are immediately available. The FlexBook examples embed their resources into their compiled SWFs, meaning that all of the graphics, sound resources, etc are downloaded along with their application.
Although these resources are always available to the Flash application, rendering them all would be expensive and might severely affect the "snappiness" of FlexBook. Instead of rendering all of the pages, FlexBook only maintains the current page, one page forward, and one page backward in its list of children. The rest are cached in a data map, to be loaded and/or swapped into FlexBook when needed. To make the page-turning display quickly, the three active pages are also cached as bitmaps. Bitmaps allow for quick rendering of transformed, clipped areas. Other, compound Flex objects would render more slowly with these complex effects applied.
Conclusion[]
FlexBook leverages the rich interactive features of both Flex and Flash. It relies heavily on the image manipulation functionality offered by Flash, functionality that is difficult if not impossible to come by in Javascript. The ability to easily add other Flex components to FlexBook in simple MXML syntax makes actually using FlexBook as a standard component painless as well. Of course, we can also see the common down side to Flash: it creates closed-source applications. If Greenfield had not made his code available, we could not have learned how it worked without reverse engineering it. Furthermore, since the content is also not openly available, Flash SWF files may raise accessibility and indexing concerns.