MadComponents3D – part4: Page Folding

MadComponents3D (MC3D) is a Stage3D-based enhancement to the popular open-source MadComponents framework that allows developers to build powerful UI experiences.  It is designed for mobile devices and tablets, but there’s nothing to stop you using it in the browser.  MC3D is more than just a Stage3D component set.  It empowers the development of fluid and cutting-edge transitions and interactivity.

Someone showed me the FlipBoard app recently.  I’d seen it before, but it occurred to me that I should incorporate the page folding effect into MC3D.  So that’s what I did.

While my test layouts (above) aren’t that attractive, I’m sure that in the hands of developers, my page folding effect can be utilised with much more visual appeal.  The page layouts are just MadComponents pages, so they can be customised to look like anything you like.  This effect will be particularly relevant  to e-publication types of applications.

Each page may be interactive, of course.  (Although, there is a restriction – you can’t use MadComponents input fields).  But you can incorporate MadComponents buttons, sliders, radio buttons, etc.  The components are interactive, and respond to touch events.  But swipe gestures will cause the page folding effect.  You can configure the page folding effect to happen either horizontally or vertically.

SVN is being difficult again.  So the latest source files are available as a download from here.  This is an FDT5 archive – but you should be able to import it into Flash Builder.

The new page folding class is called PageFolding.as.  It utilises GridPageQuarter.as.

The example code is called PageFoldingTest.as

(MC3D/src/com/powerflasher/SampleApp/PageFoldingTest.as)

As you can see from PageFoldingTest.as, it’s very easy to use this effect.

_pageFolding.containerPageTextures(_pages);
_pageFolding.start();

Where _pages is a MadComponents container.

 

Coming soon…

In subsequent instalments to this series, I’ll be describing futher MadComponents3D effects and how to incorporate them in your own projects.

In the meantime, for community discussions about MadComponents3D, come and join the facebook page:-http://www.facebook.com/groups/336764056350846/

If you’d be interested in helping to write and maintain code for MadComponents / MadComponents3D – please let me know.  If not – please blog about this project and help to spread the word.

Also, don’t forget to leave a “star”, or “g + 1″ recommendation on the Google Code site.