Skip to content
December 10, 2012 / Daniel Freeman

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.

fold

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.
About these ads

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 89 other followers

%d bloggers like this: