Skip to content
March 6, 2013 / Daniel Freeman

MC3D – part5: Page Turning, Slide Out Navigation, and Wheel Menu

MC3D is a free open-source Stage3D-framework that augments MadComponents.  It empowers the development of fluid and cutting-edge transitions and interactivity.  While primarily designed for mobile devices and tablets, but there’s nothing to stop you using it in the browser.

While developing MC3D, I’ve also added three fancy new components to ExtendedMadness.  Page Turning, Slide Out Navigation, and Wheel Menu.  The latter two can be Stage3D accelerated using MC3D.  (Given that Stage3D acceleration is optional – these components can still be used to build Blackberry apps, or as a Haxe library).

Page Turning

I actually wrote this effect a long time ago for something else – but I’ve only just brought it into MadComponents.  It’s written using traditional display-list graphics, but just about fast enough on devices.  The effect is like the pages of a book with “curling” pages.  The user can rollover the corners of a page, or click it, to make the page turn.

Screen shot 2013-03-06 at 17.07.56Screen shot 2013-03-06 at 17.23.51

UIPageTurn subclasses UIPages, so you have access to all the methods and capabilities of UIPages too, and the XML layout is similar.  For example:-

<pageTurn sound=”pageturn.mp3″> 
   {PAGE0}
   {PAGE1}
   {PAGE2}
</pageTurn>
 

Note that you may specify a page-turning swishing sound to play when a page turns.  There’s a test example on the code repository.

Slide Out Navigation

The Slide Out Navigation component is a similar navigation experience to the Facebook app on a mobile device.  You can slide the page right (press the button – doesn’t currently respond to swipe gesture to open).  This reveals a main menu at the left of the screen.

SlideOut

The XML layout expresses a container that wraps a MadComponents list and detail page like this:

<slideOutNavigation>   
   {DIVIDED_LIST}
   {DETAIL_PAGE}
</slideOutNavigation>

You can find an example here.  To employ MC3D acceleration on this component, instead of the usual UI.create(this, LAYOUT); – you would employ an MC3D static helper method:

SlideOutNavigation.create(this, SLIDE_OUT_NAVIGATION);

Wheel Menus

Wheel menus are cool.  I’d wanted to incorporate them into MadComponents for some time.  Just like all the components, Wheel Menus are customisable and style-able.  You can specify their size, colours, rim-width, icons, text-orientation, and the background is even skinnable with a texture image.

wheels

The XML layout is similar to a normal menu, with data.

<wheelMenu id=”@menu” motionBlur=”true” alignV=”centre” alignH=”centre” radius=”130″>
   {DATA}
</wheelMenu>

You’ll find that alignH and alignV work in a special way.  If you say alignH=”right” , or “left”, then the wheel menu will be half visible at the side of the page.  If you say alignV= “bottom”, then the wheel menu will be half visible at the bottom of the page.

There are three test example files for wheel menus, here, here, and here.  Notice that for Stage3D acceleration, there’s an MC3D static helper method.  Ensure that the id of your wheel menu is set to “@menu”.  And use WheelMenu.create(this, LAYOUT);

Join The Community

For community discussions about MadComponents/MC3D, come and join the facebook page:-http://www.facebook.com/groups/madcomponents

You may also be interested in the Stage3D Facebook group: http://www.facebook.com/groups/stage3d/

There’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk

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.
Advertisements

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

%d bloggers like this: