Getting Started with

Starling and FeathersHAWAII 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 FacultyUniversity of Denver

Proprietor | OwnerFractured Vision Media, LLC

Adobe Community ProfessionalAdobe Education LeaderAdobe Certified ExpertAdobe Certified EducatorAdobe Influencer

AuthorLynda.com | Peachpit Press | Adobe Press | Packt Publishing | O’Reilly Media | video2brain

ArtistAn 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

Improved Packaging Engine - iOS - BETA

Graphics: Buffer Usage flag for Stage3D

Mobile Workers (concurrency) - Android

Support for native resources access by R* mechanism in ANE - Android

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.

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 {}

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.

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

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