In this presentation, Joseph Labrecque shows you how to use the Feathers and Starling user interface frameworks along with Stage3D to build out mobile applications with Adobe AIR. We'll cover the history of Stage3D and Starling, see how to get both Starling and Feathers libraries integrated within a Flash Builder project, configure the Starling stage, and instantiate Feathers components within Starling classes to provide functional user interface elements within both games and apps. Mobile AIR has Stage3D capabilities and a set of solid frameworks to use it easily - no excuses!

1. Getting Started with
Starling and Feathers
HAWAII FLASH USER GROUP - FEBRUARY 11 2014

2. Introduction

Flash Runtimes – What’s New?

Stage3D Overview

Starling Overview

Feathers Overview

Setting up Starling

Working with Feathers

3. Joseph Labrecque

Senior Interactive Software Engineer | Adjunct Faculty

Proprietor | Owner

Adobe Community Professional
Adobe Education Leader
Adobe Certified Expert
Adobe Certified Educator
Adobe Influencer

Author

Artist
University of Denver
Fractured Vision Media, LLC
Lynda.com | Peachpit Press | Adobe Press | Packt Publishing |
O’Reilly Media | video2brain
An Early Morning Letter, Displaced | shivervein

4. Flash Player 12 / AIR 4

Released in December 2013

New number cycle

Quarterly releases

Flash Player 13 / AIR 13 on Labs

5. What’s new with the Runtimes?

Flash Player 12 / AIR 4


Graphics: Buffer Usage flag for Stage3D

Mobile Workers (concurrency) - Android

Support for native resources access by R* mechanism in ANE - Android


Improved Packaging Engine - iOS - BETA
Stage3D Creation of Context3D with Profile Array
Flash Player 13 beta / AIR 13 beta

Nothing major announced

6. Stage3D Overview

GPU accelerated graphics

Desktop and mobile

AGAL

3rd Party Frameworks:

Starling

Away3D

Citrus

Many, many others…

7. What is Starling?

Stage3D Game Engine (2D)

Open Source

DisplayList-like API

Plugin Architecture

Supported by Adobe

8. What is Feathers?

UI Components for Starling

Open Source

Fully Skinnable

Supported by Adobe

9. Configure Starling
STARLING

Sets up the GPU stuff for us.

Build a Starling instance.

Load in Feathers!

10. Starling Setup

Import the Starling classes.
import starling.core.Starling;

Declare a new Starling instance.
private var starling:Starling;

Optionally set Starling to handle
lost context and multitouch.


Instantiate a new Starling
instance, passing in both a main
class and the stage to bind it to.
Start up the instance.
Starling.handleLostContext = true;
Starling.multitouchEnabled = false;
starling = new Starling(Main, stage);
starling.start();

11. Main Starling Class

Import the Starling Sprite class.
import starling.display.Sprite;

Have the main Starling class extend Starling
Sprite.
public class Main extends Sprite {}

We are now ready for Feathers.

12. Instantiate Feathers
FEATHERS

Implement a theme.

Apply a ScreenNavigator

Decide upon a Layout or two.

Build out the content.

13. Feathers Setup

Import a Feathers theme for use in the app.

Wait for the Stage to become ready.

Instantiate a new Feathers theme within the
main Starling class once the Stage is ready.

Feathers is now ready and skinned.
import feathers.themes.FeathersTheme;
this.addEventListener(
Event.ADDED_TO_STAGE, onStageReady);
new FeathersTheme();

14. Feathers Screens

Similar to mobile Flex Views.

Many individual Screens.

Use with a ScreenNavigator.

Optionally bind Screen controls to
Feathers components like TabBar or
ButtonGroup.

15. Building a ScreenNavigator

Import the Feathers ScreenNavigator
class to hold and manage our screens.

Declare and instantiate the
ScreenNavigator instance.

Add the instance to the display.
import feathers.controls.ScreenNavigator;
private var screenNavigator:ScreenNavigator =
new ScreenNavigator();
addChild(screenNavigator);

16. Building Screens

Create a new class for each screen
which extends the Feathers Screen
class.

Override the initialize function for
instantiating and building objects.
public class ParticleScreen extends Screen {}

Override the draw function for
managing the size and layout of
objects.
override protected function initialize():void {}
import feathers.controls.Screen;
override protected function draw():void {}

17. Populating ScreenNavigator




Import the Feathers
ScreenNavigatorItem class and our
Screen classes.
Declare various screens as constants.
Use ScreenNavigator.addScreen() to
populate the ScreenNavigator with
references to our Screen classes.
Use ScreenNavigator.showScreen() to
switch screens.
import feathers.controls.ScreenNavigatorItem;
import com.josephlabrecque.demo.screens.MyScreen;
private static const SCREEN:String = “myScreen”;
screenNavigator.addScreen(SCREEN, new
ScreenNavigatorItem(MyScreen));
screenNavigator.showScreen(SCREEN);

18. Feathers Components

Similar to Flex components.

Buttons, Callouts, Headers, Lists,
Loaders, Labels, Steppers, Panels,
Pickers, Radios, Checkboxes,
Containers, Sliders, TabBars,
TextAreas, TextInputs, Toggles,
and more…

All GPU accelerated through Starling!

19. Using Components

Import the Feathers component we
want to use – Button, in this example.

Declare the Button instance.

Instantiate the instance within the
initialize function.

Adjust visual properties within the
draw function.
import feathers.controls.Button;
private var myButton:Button;
override protected function initialize():void {
myButton = new Button();
myButton.label = “Click Me";
addChild(myButton);
}
override protected function draw():void {
myButton.validate();
myButton.y = 500;
}

20. Feathers Layouts

Lots of similarities to Flex layouts.

Horizontal

Vertical

Tiled (rows/columns)

Anchored

Lots of options for each!

21. Creating Layouts

Import the specific Feathers layout
classes you intend to use.

Declare your layout for later use.

Instantiate your layout and set the
optional properties of that specific
layout.
import feathers.layout.VerticalLayout;
private var layout:VerticalLayout;
layout = new VerticalLayout();
layout.horizontalAlign =
VerticalLayout.HORIZONTAL_ALIGN_CENTER;
layout.verticalAlign =
VerticalLayout.VERTICAL_ALIGN_MIDDLE;
layout.hasVariableItemDimensions = true;

22. Applying Layouts

We’re applying our layout to a
LayoutGroup – so be sure you have
imported the Feathers LayoutGroup class.

Declare and then instantiate a new
LayoutGroup instance.

Set the previously created layout object to
the layout property of your LayoutGroup .

Add the LayoutGroup instance to the
view.
import feathers.controls.LayoutGroup;
private var container:LayoutGroup;
container = new LayoutGroup();
container.layout = layout;
this.addChild(container);

23. Future Explorations
“StarlingJS”

Away Foundation

TypeScript

Canvas

WebGL

24. Building a Mobile App with
Feathers and Starling









Downloading the frameworks and
the AIR SDK
Configuring the project
Implementing a theme
Creating the screen classes
Adding a navbar component
Building the classes
Returning saved files
Publishing a project
Installing and running the app
http://www.lynda.com/JosephLabrecque

25. Emergent Collective Three
Compilation album series produced to
showcase the aural talent which exists within
the general “creative” and “developer”
communities.

Deadline: March 13th 2014

Email: info@fracturedvisionmedia.com

More info:
http://inflagrantedelicto.memoryspiral.com
/2014/01/emergent-collective-three/

26. Thanks. Questions?
CONTACT JOSEPH

@JosephLabrecque

JosephLabrecque.com

Joseph.Labrecque@du.edu