Home

Awesome

Falcon

a Feather/Starling extension of responsive/flexible ui controls and general mobile framework.

How to use

simply fork or download the project, you can also download the binary itself and link it to your project, or import to your IDE of choice such as Flash Builder 4.7. We support Starling 1.6 and Feathers 2 and at least version 15 of Adobe AIR SDK is recommended.

Features

Introduction

Every component is a FlexComp object, every flexible component has the following properties:

Examples
  1. a drawer with two number pickers. the layout is done automatically. saves ton of layout code that usually goes into draw() method
override protected function initialize():void
{
  var hgTimer:    HGroup                            = new HGroup();
  var nPicker1:   NumberPicker                      = new NumberPicker();
  var nPicker2:   NumberPicker                      = new NumberPicker();
  var img:        FlexImage                         = new FlexImage();
  var drawerTime: PullDrawer                        = new PullDrawer();

  hgTimer.gapPercentWidth                           = 0;
  hgTimer.percentWidth                              = 99;
  hgTimer.percentHeight                             = 20;
  hgTimer.horizontalCenter                          = 0;
  hgTimer.horizontalAlign                           = HorizontalLayout.HORIZONTAL_ALIGN_CENTER;
  hgTimer.verticalAlign                             = VerticalLayout.VERTICAL_ALIGN_MIDDLE;

  nPicker1.buttonMinus                              = CompsFactory.newButton(SColors.PURPLE, SColors.PURPLE, null, null, null,false,"main::ssMain.icon_minus",true,"center",true) as FlexButton;
  nPicker1.buttonPlus                               = CompsFactory.newButton(SColors.PURPLE, SColors.PURPLE, null, null, null,false,"main::ssMain.icon_Add",true,"center",true) as FlexButton;
  nPicker1.buttonPercentHeight                      = 0.25;
  nPicker1.maxRange                                 = 24;
  nPicker1.onChange                                 = numberPicker_onChange;

  nPicker2.buttonMinus                              = CompsFactory.newButton(SColors.PURPLE, SColors.PURPLE, null, null, null,false,"main::ssMain.icon_minus",true,"center",true) as FlexButton;
  nPicker2.buttonPlus                               = CompsFactory.newButton(SColors.PURPLE, SColors.PURPLE, null, null, null,false,"main::ssMain.icon_Add",true,"center",true) as FlexButton;
  nPicker2.buttonPercentHeight                      = 0.25;
  nPicker2.maxRange                                 = 60;
  nPicker2.onChange                                 = numberPicker_onChange;

  img.source                                        = "main::ssMain.icon_:";
  img.percentHeight                                 = 50;
  img.scaleMode                                     = FlexImage.SCALEMODE_LETTERBOX;

  hgTimer.addChild(nPicker1);
  hgTimer.addChild(img);
  hgTimer.addChild(nPicker2);

  // Drawer Timer

  drawerTime.mainContent                            = new Quad(1,1,SColors.TILE_GREY,false);
  drawerTime.drawerContent                          = hgTimer;
  drawerTime.horizontalAlign                        = HorizontalLayout.HORIZONTAL_ALIGN_CENTER;
  drawerTime.drawerContentPercentWidth              = 100;

  drawerTime.toggleDrawer()

  addChild(drawerTime)
}
  1. loading packages. for complete usage learning of the GfxManager, consult it's own repository, or the source
private function loadGfxPacks():void
{
  gfxManager                                     = GfxManager.instance;

  var mrpMain:  GfxPackage                        = gfxManager.addOrGetContentPackage("main") as GfxPackage;
  
  mrpMain.loadTexturesAutomatically               = true;
  mrpMain.enqueue("assets/packages/general/spinner.png",  "spinner",    LocalResource.TYPE_BITMAP);
  // texture atlas
  mrpMain.enqueue("assets/packages/main/ssMain.png",      "ssMain",     LocalResource.TYPE_BITMAP);
  mrpMain.enqueue("assets/packages/main/ssMain.xml",      "ssMainXML",  LocalResource.TYPE_XML);
  // texture atlas
  mrpMain.enqueue("assets/packages/main/quickIcons.png",  "quickIcons");
  mrpMain.enqueue("assets/packages/main/quickIcons.xml",  "quickIconsXML");
  
  var mrpAvatarSelect:GfxPackage                  = gfxManager.addOrGetContentPackage("avatar") as GfxPackage;
  
  mrpAvatarSelect.loadTexturesAutomatically       = true;
  mrpAvatarSelect.enqueue("assets/packages/avatarSelection/sprite.png", "sprite");
  mrpAvatarSelect.enqueue("assets/packages/avatarSelection/sprite.xml", "spriteXML");

  gfxManager.loadPackages("*", onGfxLoaded);
}

private function onGfxLoaded($obj:Object = null):void
{
  ready();
  
  var img:FlexImage  = new FlexImage();
  img.source         = "main::ssMain.icon_love";
  
  var btn:FlexButton = CompsFactory.newButton("avatar::sprite.btn_down", "avatar::sprite.btn_up", btnDate_onTriggered, null, null, false, null, true) as FlexButton;      
}
  1. Splash Screen. based on flash Sprite and not on Stage3D, since it is inited before stage3d
public function startSplash(flashSpriteParent:flash.display.DisplayObjectContainer):void
{
  _appSplash              = new BitmapLayersComposer(flashSpriteParent);

  _appSplash.dataProvider = Vector.<Object>([
    {id:"1",  src: SEmbeddedAssets.bm_splash_BG_,     percentWidth: 100,  percentHeight: 100, scaleMode: BitmapLayersComposer.SCALEMODE_STRECTH,    bottom: NaN, top:NaN, left:NaN ,right:NaN, horizontalCenter:0, verticalCenter:0},
    {id:"2",  src: "app/logos/bm_splash_logo1.png",   percentWidth: 75,   percentHeight: 100, scaleMode: BitmapLayersComposer.SCALEMODE_LETTERBOX,  bottom: NaN, top:NaN, left:NaN ,right:NaN, horizontalCenter:0, verticalCenter:-40},
    {id:"3",  src: "app/logos/bm_splash_logo2.png",   percentWidth: 60,   percentHeight: NaN, scaleMode: BitmapLayersComposer.SCALEMODE_LETTERBOX,  bottom: 44, top:NaN,  left:NaN ,right:NaN, horizontalCenter:0, verticalCenter:NaN}
  ]);

  _appSplash.start();
}

UI Breakdown

Data

Demo

<a href="http://www.youtube.com/watch?feature=player_embedded&v=MCp_mLN_W94 " target="_blank"><img src="http://img.youtube.com/vi/MCp_mLN_W94/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Dependencies

Terms

Contact Author