• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building GPU-Accelerated Mobile Application Interfaces with Starling and Feathers

Building GPU-Accelerated Mobile Application Interfaces with Starling and Feathers



360|Stack 2013

360|Stack 2013



Total Views
Views on SlideShare
Embed Views



2 Embeds 1,610

http://inflagrantedelicto.memoryspiral.com 1609
http://www.365dailyjournal.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Building GPU-Accelerated Mobile Application Interfaces with Starling and Feathers Building GPU-Accelerated Mobile Application Interfaces with Starling and Feathers Presentation Transcript

    • 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
    • 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
    • STAGE3D: GPU ACCELERATED FLASH Flash Player 11.x & Adobe AIR 3.x
    • 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…
    • 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
    • FLASH PLAYER 11.0 AND AIR 3.0
    • 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
    • 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
    • ADOBE GAMING SDK Starling, Feathers, and more…
    • 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.
    • GAMING SDK 1.2 • AIR SDK 3.8 • Starling • Feathers • Away3D & Away Builder • DragonBones • FlashCC [CrossBridge] • GamePad Support, Native Extensions, & ATF Tools
    • FLASH IS FOCUSED ON GAMING But what about apps?
    • 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.
    • 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]
    • 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]
    • BUILDING AN APP WITH STAGE3D With the Gaming SDK? Yes.
    • 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.
    • STARLING 2D Stage3D Framework
    • 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();
    • 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 {}
    • FEATHERS User Interface Components for Starling
    • 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. • 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 {}
    • 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 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);
    • ADVANCED FEATHERS A few other things…
    • 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);
    • 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…
    • FEATHERS EXTENSIONS • SoftKeyboard [cote.cc/projects/softkeyboard] • Logi [github.com/justpinegames/Logi] • Feathers Extensions [wiki.starling-framework.org/feathers/extensions]
    • THANK YOU Twitter: @JosephLabrecque Email: Joseph.Labrecque@du.edu Web: http://JosephLabrecque.com/