SlideShare a Scribd company logo

Getting Started with Starling and Feathers

•
•
Joseph Labrecque
Joseph Labrecque

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!

Related slideshows

Introduction to Phaser.js
Introduction to Phaser.jsIntroduction to Phaser.js
Introduction to Phaser.js
 
BYOD: Build Your First VR Experience with Unreal Engine
BYOD: Build Your First VR Experience with Unreal EngineBYOD: Build Your First VR Experience with Unreal Engine
BYOD: Build Your First VR Experience with Unreal Engine
 
Android Jumpstart Jfokus
Android Jumpstart JfokusAndroid Jumpstart Jfokus
Android Jumpstart Jfokus
 
1 of 26
Download to read offline
Getting Started with Starling and Feathers HAWAII FLASH USER GROUP - FEBRUARY 11 2014
Introduction  Flash Runtimes – What’s New?  Stage3D Overview  Starling Overview  Feathers Overview  Setting up Starling  Working with Feathers
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
Flash Player 12 / AIR 4  Released in December 2013  New number cycle  Quarterly releases  Flash Player 13 / AIR 13 on Labs
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
Stage3D Overview  GPU accelerated graphics  Desktop and mobile  AGAL  3rd Party Frameworks:  Starling  Away3D  Citrus  Many, many others…
What is Starling?  Stage3D Game Engine (2D)  Open Source  DisplayList-like API  Plugin Architecture  Supported by Adobe
What is Feathers?  UI Components for Starling  Open Source  Fully Skinnable  Supported by Adobe
Configure Starling STARLING  Sets up the GPU stuff for us.  Build a Starling instance.  Load in Feathers!
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();
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.
Instantiate Feathers FEATHERS  Implement a theme.  Apply a ScreenNavigator  Decide upon a Layout or two.  Build out the content.
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();
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.
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);
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 {}
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);
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!
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; }
Feathers Layouts  Lots of similarities to Flex layouts.  Horizontal  Vertical  Tiled (rows/columns)  Anchored  Lots of options for each!
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;
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);
Future Explorations “StarlingJS”  Away Foundation  TypeScript  Canvas  WebGL
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
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/
Thanks. Questions? CONTACT JOSEPH  @JosephLabrecque  JosephLabrecque.com  Joseph.Labrecque@du.edu

More Related Content

Getting Started with Starling and Feathers

  • 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);
  • 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/