A common question that I’ve had from MadComponents developers is how to deal with the virtual keyboard. Specifically, the problem of input textfields getting obscured under the virtual keyboard.
The approach involves moving the UI up so that the input field is above the top of the virtual keyboard. But what do you use to trigger this action? How do you know the dimensions of the keyboard? And how do you know when to restore the UI back to where it should be?
There are SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, and SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE events dispatched by TextFelds and StageText objects. You can respond to these to know when to adjust the UI, and when to restore it. When the virtual keyboard is active, you can query stage.softKeyboardRect object to determine the rectangle area occupied by the virtual keyboard. Then it’s just a matter of raising the position of the UI, so that the input textfield is moved above this rectangle.
Here’s the code:-
</pre>
package com.powerflasher.SampleApp {
import com.danielfreeman.madcomponents.*;
import flash.text.ReturnKeyLabel;
import flash.text.SoftKeyboardType;
import flash.text.StageText;
import flash.geom.Rectangle;
import flash.events.SoftKeyboardEvent;
public class InputHelper {
protected static var _stageText:StageText;
protected static var _input:UIInput;
public function InputHelper() {
}
public static function initialiseStageText(fontSize:int = 20, colour:uint = 0x000000):void {
// var stageTextInitOptions:StageTextInitOptions = new StageTextInitOptions(false);
_stageText = new StageText();
_stageText.fontSize = fontSize;
_stageText.color = colour;
_stageText.stage = UI.uiLayer.stage;
_stageText.visible = false;
_stageText.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, softKeyboardDeactivate);
}
public static function setSoftKeyboardListeners(input:UIInput):void {
UIBlueText(input.inputField).addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, softKeyboardActivate);
if (!_stageText) {
UIBlueText(input.inputField).addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, softKeyboardDeactivate);
}
}
public static function removeSoftKeyboardListeners(input:UIInput):void {
UIBlueText(input.inputField).removeEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, softKeyboardActivate);
UIBlueText(input.inputField).removeEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, softKeyboardDeactivate);
}
protected static function finishStageText():void {
_input.text = _stageText.text;
UIBlueText(_input.inputField).visible = true;
_stageText.visible = false;
_input = null;
}
public static function applyStageText(input:UIInput, autoCorrect:Boolean = false, softKeyboardType:String = SoftKeyboardType.DEFAULT, returnKeyLabel:String = ReturnKeyLabel.DEFAULT):void {
if (_input) {
finishStageText();
}
UIBlueText(input.inputField).visible = false;
_stageText.visible = true;
_stageText.text = input.text;
// The following line won't work in the current public release of MadComponents. But it will work in a later release which has a password getter.
//_stageText.displayAsPassword = UIBlueText(input.inputField).password;
_stageText.autoCorrect = autoCorrect;
_stageText.softKeyboardType = softKeyboardType;
_stageText.returnKeyLabel = returnKeyLabel;
_stageText.viewPort = input.stageRect();
_stageText.assignFocus();
_input = input;
}
protected static function softKeyboardActivate(event:SoftKeyboardEvent):void {
var inputField:UIBlueText = UIBlueText(event.target);
var input:UIInput = UIInput(inputField.parent);
var stageRect:Rectangle = input.stageRect();
var difference:Number = UI.uiLayer.stage.softKeyboardRect.y - stageRect.bottom;
if (difference < 0) {
UI.uiLayer.y = difference;
}
if (_stageText) {
applyStageText(input);
}
}
protected static function softKeyboardDeactivate(event:SoftKeyboardEvent):void {
UI.uiLayer.y = 0;
if (_stageText) {
finishStageText();
}
}
}
}
How to use InputHelper
Suppose you have a MadComponents Form with username and password inputs:
<vertical background=”#222244″> <vertical alignH=”centre” alignV=”centre” width=”200″> <input id=”username” prompt=”username” alignH=”fill”/> <input id=”password” prompt=”password” password=”true” alignH=”fill”/> <button id=”login” alignH=”right”>Login</button> </vertical>
</vertical>;
To utilise the InputHelper class, your AS3 code would look something like this:-
_username = UIInput(UI.findViewById(“username”)); InputHelper.setSoftKeyboardListeners(_username); _password = UIInput(UI.findViewById(“password”)); InputHelper.setSoftKeyboardListeners(_password);
( To remove inputs listeners, for memory management purposes, just call InputHelper.removeSoftKeyboardListeners(_input); )
StageText
The InputHelper also includes a mechanism for utilising StageText. StageText can take advantage of auto-correction. Also, you may wish to customise the type of virtual keyboard. Alphanumeric, Numeric, Email, etc. ( To access this capability, you might want to modify the helper slightly, and use the optional parameters in the applyStageText class.) The applyStageText class temporarily replaces your <input> textfield by a StageText field. (When the user completes their text input – the text is transferred into the <input>, and the StageText becomes invisible.)
To enable this capability, you must first initialise it by calling the initialiseStageText() method. ( Call it prior to any setSoftKeyBoardListeners() calls )
On one Android test device, I noticed that StageText SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE event wasn’t always being dispatched properly when the soft keyboard disappeared. (So the UI wasn’t being restored to its usual position). But just tapping on the UI background tended to sort out the problem.
MadComponents
The popular MadComponents (+ ExtendedMadness) frameworks are about to get a new lease of life. I’ve recently been commissioned to develop a mobile app (which I can’t talk about yet), but I’m basing it on MadComponents. As the project will embody a lot of customised UI / UX design – this is going to result in a lot of improvements to MadComponents, and some great new components too. Watch this space, and join the Facebook MadComponents Group.
There’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk
Adobe Community Professional
I’m now an Adobe Community Professional. Geographically, I’m based predominantly in SE Asia and China. My online community presence is mostly channeled through the Facebook MadComponents Group.
I’m always up for conference presentations, workshops, training, and demos related to the Flash Platform, Adobe AIR, Cross-Platform mobile development, Stage3D, etc. So if anyone needs a speaker at an event – then get in touch.
For more information about me – visit my website.
Stage3D Workshop
Later today (depending on your time zone), I’ll be taking part in the first online Stage3D workshop. The event is organised by Sergey Gonchar and the Stage3D Community.
You can join the event here.
It looks like there’s going to be some great stuff demoed at the event. Hope to see you there.
I like Adobe AIR, and I like Stage3D because they’re exciting technologies. Casting aside all of the mixed messages, uncertainty and FUD that surrounds the Flash Platform nowadays, it’s worth recounting that Adobe AIR is STILL a unique and powerful option for many mobile and browser use-cases. The Adobe AIR development team are still working hard to make each release more capable than the last. And the Flash Platform community keep finding new ways of creating spectacular experiences with the technology.
MadComponents
The popular MadComponents (+ ExtendedMadness) frameworks are about to get a new lease of life. I’ve recently been commissioned to develop a mobile app (which I can’t talk about yet), but I’m basing it on MadComponents. As the project will embody a lot of customised UI / UX design – this is going to result in a lot of improvements to MadComponents, and some great new components too. Watch this space, and join the Facebook MadComponents Group.
There’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk
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.
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.
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.
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
Nine days ago, I outlined my plans for an AS”next” based port of MC3D, and a derived Flex framework. A lot can happen in nine days. Today, Adobe released a new roadmap, and it turns out that AS”next” isn’t going to happen after all.
http://www.adobe.com/devnet/flashplatform/whitepapers/roadmap.html
The good news is that “Adobe continues to actively invest in enabling developers to create and deploy Flash based content as mobile (and desktop) applications via Adobe AIR.”
The bad news is that there will be no AS”next”. Hence no long term plans for the Flash Platform. Adobe’s focus is ridiculously narrow nowadays. Gaming and Premium Video.
I could speculate that maybe Adobe should form an alliance with Ideaworks (MarmaladeSDK). Adobe are good at building IDEs that accelerate workflow. Ideaworks have a powerful cross-platform engine.
I was relying on AS”next” for the evolution of MC3D, because as things stand now – There are too many Stage3D bottlenecks. As far as I’m concerned, the speed of ActionScript3 execution isn’t as important as the current limitations in graphics rendering. I was optimistic that architectural improvements in AS”next” would alleviate graphics rendering bottlenecks.
Now that there is no AS”next” – I hope that Adobe will focus on changes to AS3, and the current VM that will make it more capable. So this blog-post is about how Adobe should improve AS3, and my Stage3D wish list.
Currently, Stage3D is only designed for the Games use-case. Most games are economical with their use of textures. And typically, load the textures at the start. So they can benefit from ATF compression.
User Interfaces, on the other hand, require a lot of texture surfaces. Textures are generated on-the-fly. And sometimes we want to manage texture memory usage by uploading and dispose of textures on-the-fly. If the UI is changing or scrolling rapidly, then the speed of texture update will dictate how quickly and smoothly the UI experience can change or scroll.
Stage3D isn’t very good at UIs, because it can’t upload textures quickly enough. It’s not very good at rendering components that are elastically-sized depending on screen-size and orientation. And Stage3D isn’t good at rendering freely-styled text.
Stage3D has been bolted onto the side of AS3. It only has low-level primitive APIs, and it’s mostly good at moving bitmap textures around.
The Display List has mature and sophisticated APIs that are good at vector graphics, and freely-styled text.
It would be great if there was a fast way to accomplish bitmaps, vector graphics, and text – all rendered in Stage3D. Maybe I just need fast graphics and text APIs that “draw” onto a BitmapData, or directly to a Texture. We wouldn’t need the display-list if there was a pure Stage3D way to accomplish that. (I’d settle for handling mouse collision-detection myself if it wasn’t provided).
Apart from better Stage3D graphics, I want a smaller captive runtime for mobile AIR apps. Attaching only the libraries that you’ve used. This is another feature I was expecting in AS”next”. Now, I’m hoping that Adobe will introduce it in AS3.
What if the compiler could optionally just leave out the Display-List libraries if we’re not using them? What if the root class of a Stage3D app doesn’t need to extend Sprite anymore?
I hope that Adobe are already planning to take some of the AS”next” ideas, that were originally destined for AS”next”, and incorporate them into AS3 instead. If they can fix some of the Stage3D limitations, then why not make AS3 execution faster? Possibly a stricter compile mode, that restricts you to using a sub-set of AS3 in a strongly-typed fashion, but results in faster object code. And faster floating point types.
AS3, AIR, and Flash have the potential to be great for cross-platform development across mobile devices, desktop, and browser. We’re 99% there. I just hope Adobe are committed enough to put in that extra 1%.
_____________________
For community discussions about MadComponents/MC3D, come and join the facebook page:-http://www.facebook.com/groups/madcomponents
There will be an online Stage3D conference scheduled for 22nd February. The event is free, and you can register here:http://gonchar.me/stage3d/
I’m presenting something about MC3D, and my future plans for MC3D.
The Stage3D Facebook group is here: http://www.facebook.com/groups/stage3d/
Flex, MC3D, AS”Next”, and the new VM
Back in 2011, I pointed the way to a potential new lightweight Flex framework based on MadComponents. In the last year, since my introduction of MC3D, I’ve been talking more about a Flex port of MC3D that enables Stage3D accelerated UIs.
Meanwhile, there has been some discussion on the Open Flex Mailing List about a future direction for Flex for the next generation language, AS”next” and the new runtime. It seems that the next runtime will not support a traditional display list – and all graphics will be rendered via Stage3D.
There has been some discussion about graphics APIs that work a bit like the current display-list APIs, but utilise GPU accelerated Stage3D graphics. Isn’t that what GPU-rendermode did? Yes, but I assume AS”Next” will render vector graphics directly to Stage3D vertices, textures, and shaders. Similar to this approach.
You’ll remember that I already played around with the idea of geometric shaders to render MadComponents. One of the reasons that I didn’t pursue this approach is because it doesn’t solve text. I could have combined my geometric shader with a bitmap font shader. But the problem with bitmap fonts in Stage3D is that they’re not versatile enough. I want to be able to freely manipulate typeface, size, and colour in the way that MadComponents allows.
Adobe recently introduced a Query Graphics API that allows you to query vector graphics on the display list. Developers have welcomed this API as it enables them to build some interoperability between the display list APIs and Stage3D. But again, this doesn’t solve the problem of text.
MC3D relies on interoperability between UIs drawn on the display list (allowing for elastic-resizing, and versatile styling of components/text), and rendering in Stage3D (allowing for smooth movement, and clever shader effects like reflections and motion blur). The best of both worlds.
In MC3D, everything is still drawn on the display list, but then I capture the bitmap surfaces of my rendered UIs, and upload them to Stage3D as 128×128 texture tiles. Unfortunately, texture upload isn’t as fast as it could be. It’s a bottleneck, especially on mobile. Especially with retina displays and transitions that involve multiple UI pages, or loss of Stage3D context, or redrawing the UI on orientation change.
In the future, with AS”next”, I’m hoping for one of two likely solutions to this bottleneck. Either texture upload will get a lot faster. Or new screen APIs will allow me to render versatile text directly in stage3D. With full control over typeface, colour, size and styling.
MadComponents/MC3D will obviously need rewriting in AS”next” and to use new APIs, but they’re pretty straightforward lightweight classes, and it shouldn’t be too hard.
My Proposal
Personally I’m not a fan of Flex on Mobile. MadComponents is all you need. But I appreciate that other developers are quite attached to the Flex legacy. It was the limitations and bloatedness of Flex on mobile that prompted me to write MadComponents in the first place.
I’ve done some quick and dirty experiments to demonstrate the feasibility of my ideas for a new Flex framework, and Stage3D accelerated capabilities. So my proposal is that when we know more about the nature of AS”next”, the Open Flex group might get involved, and siphon-off my MadComponents/MC3D work to form the basis of a new Flex framework.
Let me make it clear what I’m willing to contribute to a new Flex component set. It is my intention to deliver a port of MadComponents/MC3D for AS”next”. I’m calling this project MC3D”next”. (Some ExtendedMadness components may not make the cut.). I invite Open Flex developers to pick up MC3D”next” and use it as the basis for a new Flex component set.
While I am willing to advise the Open Flex developers, and participate in discussions (time and other-commitments permitting), I would expect the Open Flex group to write Flex wrappers, and modifications to MC3D to allow it to work in Flex. My efforts will be focussed developing, maintaining and porting the my existing MadComponents/MC3D work to AS”next”.
I’m open to the idea of managing MC3D”next” as an apache project.
Of course this is all speculative. We don’t yet know enough about AS”next”. It’s likely that a AS”next” project won’t support legacy Halo and Spark components anyway. A new incarnation of Flex, (call it Flex”next”), will likely need to break from legacy. But Flex devotees will likely argue that the familiar conventions of Flex are what define it – and this is what they will endeavour to preserve in Flex”next”.
MadComponents and Flex Compared
I suppose you can think of Flex and MadComponents as distant cousins. Both use XML layouts to describe a UI. Both adapt to screen size, pixel density, and orientation. Both are fully-fledged and mature frameworks, with server communication capabilities, and memory management, not just UI components. Both were designed for real Enterprise apps, not just game UIs. Both allow for versatile styling for the appearance of component appearance and text. For example:-
<button colour=”#FF9933″ curve=”15″ ><font size=”20″>Click</font></button>
Versatile styling is an important similarity. Starling and Feathers don’t enable this. To create a new appearance in Feathers, you’d need to create new texture skins. Whereas with MadComponents, textures are drawn dynamically.
There are ideological differences too. Flex components have more attributes/properties and settings that allow a lot of customisation without dipping into the code. I’ve often referred to this as the “Swiss Army knife” approach. MadComponents are simpler, and while they allow for some styling and customisation – beyond that, the developer is encouraged to dip into code and extend the class. Some MadComponents are skinnable. Simpler MadComponents omit skinning code (for brevity), and developers should subclass instead.
Stage3D accelerated Flex!
I’ve already demonstrated how easy it is to write Flex wrappers for MadComponents. Allowing you to mix MadComponents with old Halo and Spark components. MadComponents Flex wrappers could be written so to maintain all of the familiar conventions of Flex.
My latest experiments demonstrate how easily the new MC3D Stage3D classes can be leveraged in Flex.
Note that these are very quick and dirty experiments. The updated FlexMadComponents project may be acquired from the Open Source code repository.
My first experiment was a simple Stage3D accelerated Flex list class. MC3D lists are more responsive than display-list lists. Also, I utilse a variable motion blur shader, which makes their movement seem more natural when they are scrolling fast.
<mad:FlexUIList gpu=”true” dataXML=”{DATA}” percentHeight=”100″ percentWidth=”100″/>
Note the gpu attribute. If this is true, then this Flex list is rendered using Stage3D. I made a couple of minor tweaks to MC3D to do this – but no major rewrites. My quick and dirty Stage3D list code is here.
A more spectacular example demonstrates MC3D page transitions in Flex. MC3D now includes seven 3D transition modes: Slide, Slide Over (*new), Cube, Door, Flip, Swap and Trash.
Take a look at the mxml class here. It uses conventional spark and halo Flex components, and ActionScript calls to MC3D’s PageTransitions class. Notice how I hide the display list during MC3D transitions. (FlexGlobals.topLevelApplication.visible = false;). But the user isn’t aware of this switch.
I have to change the Flex SDK to get this example to work. I’d merged a recent release of AIR with Flex4.6. For some reason, my merged SDK wasn’t recognising the standard Flex components. (“Could not resolve xxx to a component implementation” error). I’m not sure why this happened, but when I switched to the standard Flex 4.6 SDK, everything worked fine. Consequently, I haven’t tested this in AIR on a mobile device – but I anticipate that it will work just like it does in the browser.
Coming soon…
In subsequent instalments to this series, I’ll be describing futher MC3D effects and how to incorporate them in your own projects.
In the meantime, for community discussions about MadComponents/MC3D, come and join the facebook page:-http://www.facebook.com/groups/336764056350846/
If you’re not a member of the Facebook group – then you’re missing out on the latest discussions and innovations regarding MadComponents and MC3D.
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 the previous instalment we looked at the grid scrolling components that mimic the behaviour of a Windows Metro UI for your Flash or AIR applications.
If you downloaded the open-source beta – you may want to update from the code repository – as I’ve added a few optimisation tweaks and fixes since.
I’ve moved the SVN source: It’s at http://code.google.com/p/mad-components/source/browse/trunk/MadComponents3D/
There’s also a new demo. The source code is here.
In this new instalment, we’ll be talking about the page-flipping capabilities of MC3D. This youtube video mostly shows page-flipping in action. (Although I made it during development – so the experience is slightly more polished now).
There are four page-flipping modes.
1. MadPages
2. MadFlow
3. MadCircular
4. MadSwap
In all four cases, when you activate a flipping mode, the current page slides back so that you see it in context with other pages. Within a flipping mode, the page isn’t interactive, as any touch event will be interpreted as flip gesture. A single tap will zoom the current page back into a normal MadComponents view, so you can interact with it again.
I’ve used chart pages in the demo, because they look nice. But you can customise the layout to use any MadComponents layout, including interactive elements such as buttons, inputs, pickers, lists, etc.
Delving into the code
You’ll notice that some MC3D classes are suffixed by the letter E. There’s PageFlipping.as class, and a more recent PageFlippingE.as class. (There’s also GridScrollingE.as, etc.).
While I was developing MC3D, I would first implement the algorithm in the most straightforward way. Then later, when I experimented with optimisations and refinements – I would extend and override the original class. Hence “E”.
One of the “E”-version optimisations is to represent each page with a tiled arrangement of 128×128 texture squares. This is handled by the GridPage.as class. It has been reported that multiple small texture uploads are faster than a large texture upload. (Although Stage3D texture uploads are still pathetically slow in either case).
The other advantage with a grid arrangement of textures is that you can replace any individual square texture – without having to reload all textures. This means that if any component on a page changes – (flipping a switch, typing text into an input, changing a picker, etc.) – just refresh the relevant squares – not the entire page.
As with most of the MC3D classes, I’ve employed some clever vertex and fragment shaders. The vertex shader interpolates from page corner vertices to arrive at the vertices for each comprising grid square. There’s fragment shader that generates a reflected image, rendered as a gradient, fading to black.
Unless someone reports that the non-”E” classes perform better in some respect – it is probably best to assume that they are depreciated in favour o the “E”" classes. At some stage – we might flatten the classes to remove obsolete code.
Get involved
I said “we” – as this popular open source currently has very little contribution from anyone else. It irritates me intensely that Adobe have thrown their weight behind less mature, and less capable alternatives. A direction that is obviously furthering someone’s career inside Adobe – and has absolutely nothing to do with benefiting the developer community.
So as my allegiance shifts towards certain competitors of Adobe AIR in the mobile space, my support for MC3D will diminish. But it’s a worthwhile project, and it would be great to find a champion or two to ensure it continues.
Using this effect in your own projects
The easiest way to understand PageFlipping is to modify the examples.
PageFlipping.as API
public function set snapToPage(value:Boolean):void
public function get snapToPage()
Page snapping, ensures that the current page in centre on the screen.
public function containerPageTextures(container:IContainerUI, showPageIndicator:Boolean = false):void
Specify a container component such as <navigation>, <pages>, <tabPages>, etc. This method will capture the textures of all the pages.
public function pageTextures(width:Number, height:Number, pages:Vector.<Sprite>, showPageIndicator:Boolean, backgroundColour:uint = 0xFFFFFF):void
Specify page textures as a Vector of Sprites. (Use this as an alternative to containerPageTextures).
public function updatePage(pageNumber:int, component:DisplayObject = null):void
Update the textures for a particular component on a page. (The page is represented by a grid of textures, so only updates relevant squares).
public function get pageNumber():int
public function set pageNumber(value:int):void
Current page number.
public function madPages(zoomInOnClick:Boolean = false):void
Switch out of page-flipping mode and go into normal interactive MadComponents mode.
public function zoomOutToMadPages(zoomInOnClick:Boolean = false):void
An animation to switch out of page-flipping mode and go into normal interactive MadComponents mode.
public function madFlow(zoomInOnClick:Boolean = false):void
Switch to MadFlow mode.
public function zoomOutToMadFlow(zoomInOnClick:Boolean = false):void
Animate into MadFlow mode.
public function madSwap(zoomInOnClick:Boolean = false, spin:Boolean = false):void
Switch to MadSwap mode.
public function zoomOutToMadSwap(zoomInOnClick:Boolean = false, spin:Boolean = false):voidpublic function
Animate into MadSwap mode.
public function madCircular(zoomInOnClick:Boolean = false, spin:Boolean = false):void
Switch to MadCircular mode.
zoomOutToMadCircular(zoomInOnClick:Boolean = false, spin:Boolean = false):void
Animate into MadCircular mode.
public function zoomInToPage():void
Animate to interactive MadComponents mode.
PageFlippingE.as API
public function loadPage(pageNumber:int, backgroundColour:uint = 0xFFFFFFFF):void
Replace a page with a new texture.
