Skip to content
October 26, 2012 / Daniel Freeman

MadComponents3D – part2: Grid Scrolling

MicroSoft have just officially launched their Windows 8 Operating System, which has prompted me to write my second tutorial about MadComponents3D effects.

Stage3D enabled Grid Scrolling was inspired by the MicroSoft experience.  It allows a Flash or AIR developer to incorporate the effect within their own application or web site.  MadComponents is a popular, free, and open-source UI framework.

This may not look quite like the Windows demos – but it is based on MadComponents layouts, so the look is very customisable.  I threw together some quick demos based on graph layouts – but I’d love to be able to showcase something that incorporates the icons and colours that MicroSoft use.

Is anyone up to building a Windows-8 look-alike demo for Flash or AIR ?

While the current demos don’t quite look the part, the behaviour is very cool – especially on tablet devices.  You can swipe the grid-based layout to slide it left and right.  Click on any tile, and you can configure it to return to an editable UI page – or even flip around to access an editable modal form – then dismiss the form, and the tile will flip back into formation.  You can define live-update regions which automatically transition between alternate appearances.

Note that just like the rest of MadComponents, Grid Scrolling will intelligently adapt itself to the screen size and pixel density of your device.

There are some demos on the Google code site.  These two examples show the GridScrolling classes used in conjunction with PageFlipping classes – for a demo that allows the user several ways to flip between pages.

This demo shows how to do flip around pop-up forms and live-update.

[ Ok, I realise that every time I provide links to downloadable source code – somebody is going to ask me why I don’t provide a Flash live demo .  People have been asking me lately about a Tour d’MadComponents app to show-off the extensive features and capabilities in MadComponents / ExtendedMadness and MadComponents3D beta.  The reason I don’t do this is that I don’t have time.  MadComponents is not supported by Adobe, despite the large community using it.  All we have is our community.  This will only continue to work if we all put in a bit of effort.  So if anyone wants to build some live online demos, or Tour d’MadComponents mobile apps -then we’d all be really grateful! ]

Setting-Up MadComponents3D:

You’ll need to download or SVN checkout all the source files here.  Include them in your own program, and include the relevant libraries.

import com.danielfreeman.madcomponents.*;
import com.danielfreeman.extendedMadness.*;
import com.danielfreeman.stage3Dacceleration.*;

You must ensure that you’re using an up-to-date version of Flash or AIR, and you may need to set a compiler option such as swfversion=17 (What swf version is the new AIR3.5? – anyone know)?

Also, within your app.xml file, make sure that you’ve enabled Stage3D, like this -

<aspectRatio>portrait</aspectRatio>
<fullScreen>false</fullScreen>
<autoOrients>false</autoOrients>
<renderMode>direct</renderMode>
<depthAndStencil>true</depthAndStencil>

This all goes in just before the </initialWindow> tag.

It’s best to test to see you can run the samples first – then modify, or write your own app.

Write your own app – using this effect:

1. The first thing you do is request a Stage3D context.

addEventListener(Stage3DAcceleration.CONTEXT_COMPLETE, contextComplete);
Stage3DAcceleration.startStage3D(this);

2. Within contextComplete(), initialise Grid Scrolling.

_tiledUI = new GridScrollingE();
_tiledUI.defineGrid(GRID);  // Note optional second parameter for the number of tiles across per page.

Here, the constant GRID is a two-dimensional Vector of XML layouts.  (Vector.<Vector.<XML>>).  This two-dimension map of layout tiles, corresponds with their arrangement within the grid.  The layouts are standard MadComponents Layouts, enabling you to customise the appearance, colour, images, and text within each tile.

For example:-

protected static const GRID:Vector.<Vector.<XML>> = Vector.<Vector.<XML>>([
Vector.<XML>([LAYOUT0, null, LAYOUT1, LAYOUT2, LAYOUT4, LAYOUT5]),
                  Vector.<XML>([null , null, LAYOUT6, LAYOUT7, LAYOUT8, LAYOUT9]),
                 Vector.<XML>([LAYOUT10, LAYOUT11, LAYOUT12, LAYOUT13, LAYOUT14, LAYOUT15]),
]);

Notice that LAYOUT0 is surrounded by nulls.  This is because we’re going to make this tile twice as large, using a tile attribute:-

protected static const LAYOUT0:XML = <vertical tile=”2×2″ … etc…

3. Activate the effect:

_tiledUI.start();

4. Listen for grid clicks:

addEventListener(GridScrolling.CLICKED, gridClicked);

Within your gridClicked handler, you can _tiledUI.arrayIndex. This is an index of which tile was clicked.

GridScrolling.s Class Reference:

Having described defineGrid, and Start, here are some more public APIs, of the GridScrolling class.

public function setCellSize(width:Number, height:Number):void

Before you call defineGrid, you can specify a tile size.  The default is 256 x 256 pixels.

public function set backgroundColour(value:uint):void

Set a background colour

public function stop():void

Deactivate the grid UI

GridScrollingE.s Class Reference:

GridScrollingE extends GridScrolling, and adds live-tiles, and flip-around pop-up menu capabilities.  See this example to see flip-around forms in action.

public function addSwapFlipTexture(row:int, column:int, layout:XML):void

The tile at position (row, column) is a live-tile.  You specify a new MadComponents layout, and the tile will switch between the original, and the new appearance.

public function pageTexture(page:IContainerUI, backgroundColour:uint = 0x000000):uint

For flip-around tiles, define the texture of the interactive form on its flip-side.  This returns a page index.

public function flipAround(row:uint, column:uint, pageIndex:uint = 0, reverse:Boolean = false):void

Flip the tile around at position (row, column).  We supply a page index ( from pageTexture) for the flip-around texture.

public function flipAroundClicked(pageIndex:uint = 0, reverse:Boolean = false):void

This method does the same, except instead of supplying a (row, column) position – it will flip the last tile clicked.

public function flipBack():void

Unflip the last flip, and restore the tile into the grid formation.

A Bit Of Technical Explanation:

This is an insight as to how these classes work – you don’t need to understand this bit to use them.

Both AGAL shaders are unconventional.  The advantage of a not building this effect on top of Starling – is that I can use custom shaders, and also 3D geometry.

(See GridScrollingE.as)

The vertex shader applies two alternative transformation matrices to each vertex.  The first is the transformation to the start animation position.  The second is the transformation to the end animation position.  So we just interpolate between these two transformed points to accomplish the animated movement.

The fragment shader implements a custom UV animation algorithm that allows one tile texture to slide up in front of another tile texture.  This is how I accomplish the live tile update effect.

Each tile is a separate texture.  MadComponents3D uses separate textures a lot – in preference to tessellating many textures within large sprite sheets.  The purpose of this is to allow for updates, without incurring the overhead of uploading an entire texture – when only a portion of it has changed.  Better to split it into those portions.

But, there is a small overhead when rendering, as we have to redefine our texture register in the loop, something like this:-

for (var j:int = 0; j < _count; j++) {

_context3D.setTextureAt(0, _tiledTexture[j]); //fs0

_context3D.drawTriangles(_indexBuffer, 6 * j, 2);

}

_context3D.present();

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 tis 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

One Comment

Leave a Comment
  1. Leng / Nov 5 2012 5:03 pm

    Air 3.5 is SWF version 18, you can see a table of versions at http://www.bytearray.org/?p=4848

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: