This document provides an overview of building GPU-accelerated mobile applications using Starling and Feathers. It discusses Stage3D and its history, introduces Starling and Feathers frameworks, and demonstrates how to set up a basic Starling project and integrate Feathers for screens, components, and layouts. Advanced Feathers features like popups and extensions are also covered.

1. BUILDING GPU-ACCELERATED
MOBILE APPLICATION
INTERFACES WITH STARLING
AND FEATHERS
Joseph Labrecque
360|Stack 2013

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

3. HERE’S THE PLAN
• Talk about Stage3D – some history
• Introduce some Stage3D frameworks
• Basic Starling project setup
• Feathers setup and theming
• Feathers screens, components, and
layouts
• Advanced explorations

4. STAGE3D: GPU ACCELERATED FLASH
Flash Player 11.x & Adobe AIR 3.x

5. SOME HISTORY
• Adobe shows off Molehill at MAX 2010
• Lots of excitement around 3D in Flash!
• MAX 2011 - Stage3D made available with
Flash Player 11 and AIR 3.
• Mobile support for Flash Player was
coming soon.
• November 2011. Fffuuuu…

6. RECENT HISTORY
• 11.1/3.1 – bugfixes and stuff…
• 11.2/3.2 – Stage3D on mobile AIR
• 11.3/3.3 – Texture Streaming
• 11.4/3.4 – Concurrency & Telemetry
• 11.5/3.5 – Shared ByteArray
• 11.6/3.6 – readGraphicsData()
• 11.7/3.7 – GameInput APIs

7. FLASH PLAYER 11.0 AND AIR 3.0

8. 11.8/3.8 - RECENT ADDITIONS
• BASELINE_EXTENDED : 4096×4096 texture
support
• Rectangle Textures in BASELINE and
BASELINE_EXTENDED
plus…
• Recursive stop on MovieClip
• StageVideo on AIR desktop
• GameInput APIs

9. FUTURE EXPLORATIONS
• Mobile Workers – Threading on mobile
• “Molehill 2” – Stage3D Improvements
• Integrated 2D/3D physics
also…
• Improved iOS compile time
• Reduced iOS file sizes
• Android Key Lime Pie and iOS7 support

10. ADOBE GAMING SDK
Starling, Feathers, and more…

11. GAMING SDK?
The Adobe Gaming SDK provides an essential
collection of frameworks, code samples, and
learning resources that work together to help
developers create and deliver ActionScript
games across multiple devices.

12. GAMING SDK 1.2
• AIR SDK 3.8
• Starling
• Feathers
• Away3D & Away Builder
• DragonBones
• FlashCC [CrossBridge]
• GamePad Support, Native Extensions,
& ATF Tools

13. FLASH IS FOCUSED ON GAMING
But what about apps?

14. ADOBE ROADMAP FOR THE FLASH
RUNTIMES
Adobe believes that the Flash runtimes are
particularly and uniquely suited for two
primary use cases: creating and deploying
rich, expressive games with console-quality
graphics and deploying premium video.
This focus does not mean that existing content
will no longer run, or that Flash cannot be
used for content other than gaming and
premium video. However, it does mean that
when prioritizing work, gaming and premium
video use cases will take priority.

15. STAGE3D APPLICATIONS
• Realaxy [facebook.com/Realaxy]
• APEXvj [apexvj.com]
• Messi 2012 Matrix [messimatrix2012.com]
• VisYOUalize Yourself
[hp.denon.com/visyoualize_yourself]
• Sendra Custom Boots
[custom.sendra.com]
• SimplyMpress [simplympress.com]

16. STAGE3D APPLICATIONS
• Psykopaint (iOS) [psykopaint.com]
• Sense [sense-app.com]
• Bathplanner Pro [app.onlinebadplaner.at]
• Teleport [teleport.io]
• Mizuno Product Customizator
[mizunocustom.com/volleyball/sublimated]
• DeezCovr [deezcovr.com]
• Total Body Fitness [totalbodyfitness.biz]
• Paper Critters [papercritters.com]

17. BUILDING AN APP WITH STAGE3D
With the Gaming SDK? Yes.

18. WHAT DO WE NEED?
STARLING
• Sets up the GPU stuff for us.
• Build a Starling instance.
• Load in Feathers!
FEATHERS
• Implement a theme.
• Apply a ScreenNavigator
• Decide upon a Layout or two.
• Build out the content.

19. STARLING
2D Stage3D Framework

20. STARLING SETUP
• Import the Starling classes.
• Declare a new Starling instance.
• 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.
import starling.core.Starling;
private var starling:Starling;
Starling.handleLostContext = true;
Starling.multitouchEnabled = false;
starling = new Starling(Main, stage);
starling.start();

21. MAIN STARLING CLASS
• Import the Starling Sprite class.
• Have the main Starling class extend
Starling Sprite.
• We are now ready for Feathers.
import starling.display.Sprite;
public class Main extends Sprite {}

22. FEATHERS
User Interface Components for Starling

23. 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();

24. 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.

25. 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);

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

27. 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);

28. 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!

29. 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;
}

30. FEATHERS LAYOUTS
• Lots of similarities to Flex layouts.
• Horizontal
• Vertical
• Tiled (rows/columns)
• Anchored
• Lots of options for each!

31. 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;

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

33. ADVANCED FEATHERS
A few other things…

34. POPUPS
• Import the Feathers PopUpManager class.
• Declare and instantiate an object to use as
the visual popup component.
• Utilize the PopUpManager class to add or
remove a popup using the declared object.
• Options for modal and centered.
import feathers.core.PopUpManager;
private var popUp:Image;
popUp = new Image(texture);
PopUpManager.addPopUp(popUp, true,
true);

35. FEATHERS AND FLEX
<feathers:PanelScreen xmlns:
fx="http://ns.adobe.com/mxml/2009"
xmlns:
feathers="library://ns.feathersui.com/mxml"
>
<feathers:Button label="Click Me" />
</feathers:PanelScreen>
• Feathers has partial MXML support.
• Components, Containers, Layouts, and
Collections will all work.
• No binding allowed!
• Special build with Flex SDK and not ASC 2.0
for this to work…

36. FEATHERS EXTENSIONS
• SoftKeyboard
[cote.cc/projects/softkeyboard]
• Logi
[github.com/justpinegames/Logi]
• Feathers Extensions
[wiki.starling-framework.org/feathers/extensions]

37. THANK YOU
Twitter: @JosephLabrecque
Email: Joseph.Labrecque@du.edu
Web: http://JosephLabrecque.com/