Archive for the ‘Recording’ Category
as3viewnavigator – ViewNavigator for as3/flash projects
I’m currently working on an application for the BlackBerry PlayBook tablet. The API that comes with the PlayBook SDK is based on pure AS3. Of course I could use Flex Hero for the job but I wanted to try out the “native” stuff that it comes with. My impression so far is really positive and the only thing that I’ve found missing so far was the concept of Views and ViewNavigator that comes with Flex Hero for mobile devices.
That is why I took a bit of time today to create library heavily inspired by ViewNavigator from Flex Hero that I could use for my pure as3/flash projects. The library is available for download here. Also checkout the video below for the details on how to use it.
Just for the reference, to tween the view transitions I used Tweener library that is also used internally by PlayBook API.
Below is the snippet of code that implements the example from the video above, you can also download the project source from here.
package { import com.riaspace.as3viewnavigator.ViewNavigator; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.MouseEvent; import flash.text.TextFormat; import flash.text.TextFormatAlign; import qnx.ui.buttons.LabelButton; import qnx.ui.core.Container; import qnx.ui.core.ContainerAlign; import qnx.ui.core.ContainerFlow; import qnx.ui.core.SizeMode; import qnx.ui.core.Spacer; import qnx.ui.text.Label; [SWF(width="600", height="1024", backgroundColor="#FFFFFF", frameRate="30")] public class Main extends Sprite { private var navigator:ViewNavigator; private var viewNumber:int = 0; public function Main() { initializeUI(); } private function initializeUI():void { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; // Creating instance of ViewNavigator navigator = new ViewNavigator(this); // Pushing first view to the navigator navigator.pushView(createView()); } private function createView():Container { var view:Container = new Container; view.flow = ContainerFlow.VERTICAL; view.align = ContainerAlign.MID; // Incrementing view number viewNumber++; // 20% spacer from the top view.addChild(new Spacer(20)); // Adding label with view number var numLabel:Label = new Label; numLabel.text = viewNumber.toString(); var format:TextFormat = new TextFormat; format.size = 70; format.bold = true; format.align = TextFormatAlign.CENTER; numLabel.format = format; numLabel.size = 100; numLabel.sizeMode = SizeMode.BOTH; view.addChild(numLabel); // 15% spacer between label above and buttons view.addChild(new Spacer(15)); // Adding "push view" button var btn:LabelButton = new LabelButton; btn.label = "push view"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.pushView(createView()); }); view.addChild(btn); // Adding "pop view" button btn = new LabelButton; btn.label = "pop view"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.popView(); }); view.addChild(btn); // Adding "pop all" button btn = new LabelButton; btn.label = "pop all"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.popAll(); }); view.addChild(btn); // Adding "pop to first button" button btn = new LabelButton; btn.label = "pop to first"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.popToFirstView(); }); view.addChild(btn); // Adding "replace" button btn = new LabelButton; btn.label = "replace"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.replaceView(createView()); }); view.addChild(btn); return view; } } }
Screencast with Toaster Lite tour
Today I recorded a screencast of a Toaster Lite tour; it quickly demonstrates how the application works and how to use it.

