A preview of Feathers 2.2(with the first look at the Feathers SDK)

Josh Tynjala / Flash Online Conference #12 / 2015 May 29

What’s new?• Feathers 2.2 is almost ready

for beta.

• The Feathers SDK is almost ready for alpha.

• Over 1,000 downloads per month.

Feathers 2.2• New layouts.

• New transitions.

• Retina desktop skins.

• Media players.

FlowLayoutNew Layout

WaterfallLayoutNew Layout

IrisNew Transition

WipeNew Transition

Retina desktop themes• Support for HiDPI Macs.

• Original designs drawn with vectors in FLA file.

• May be edited and exported as a new sprite sheet.

Media Players

It’s a media player

frameworkBecause every video player looks a little bit different.

Building a media player• Create a new VideoPlayer or SoundPlayer component.

• Add playback controls as children.

• Playback controls may be nested in containers.

• Media player automatically detects components that implement IMediaPlayerControl interface.

• No event listeners to set up. It’s automatic.

Media Player Controls• PlayPauseToggleButton

• SeekSlider

• TimeLabel

• VolumeSlider

• MuteToggleButton

• FullScreenToggleButton

SoundPlayer Example Codevar player:SoundPlayer = new SoundPlayer();player.layout = new HorizontalLayout();this.addChild(player);

var playPauseButton:PlayPauseToggleButton = new PlayPauseToggleButton();player.addChild(playPauseButton);

var seekBar:SeekSlider = new SeekSlider();seekBar.layoutData = new HorizontalLayoutData(100, 100);player.addChild(seekBar);

var timer:TimeLabel = new TimeLabel();player.addChild(timer);

var muteButton:MuteToggleButton = new MuteToggleButton();muteButton.showVolumeSliderOnHover = true;player.addChild(muteButton);

player.soundSource = "example.mp3";

Anything else in Feathers 2.2?• Performance improvements in Lists, item renderers, and text.

• Fixed issues in BitmapFont and TextBlock text editors to properly support non-Latin characters.

• More unit tests for improved stability.

• Build and test on Travis-CI after every push to Github.

• Bug fixes and minor features.

Feathers SDK

What is the Feathers SDK?• A fork of the Apache Flex SDK.

• Feathers components in MXML!

• Sensible defaults: 60 FPS, direct render mode.

• SDK installer that can download different versions of AIR and playerglobal.swc, just like Apache Flex.

Feathers in MXML• Add components to containers.

• Set properties.

• Listen for events.

• Bind data to properties.

• Create inline components with <fx:Component>

• <fx:Script>, <fx:Declarations>, and <fx:Metadata>

Example MXML<?xml version="1.0" encoding="utf-8"?>

<f:LayoutGroup xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:f="library://ns.feathersui.com/mxml">

<f:layout>

<f:HorizontalLayout gap="10"

horizontalAlign="center" verticalAlign="middle"/>

</f:layout>

<f:Slider id="slider1" minimum="0" maximum="1" value="0.5"

change="trace(slider1.value)"/>

<f:Slider id="slider2" minimum="0" maximum="1" value="{slider1.value}"/>

</f:LayoutGroup>

Binding• Can add [Bindable] or [Bindable("eventType")]

metadata to properties in ActionScript.

• Automatically detects if a class is a Starling EventDispatcher or a Flash IEventDispatcher.

• One-way {} and two-way @{} binding are both supported.

<f:Application>• Subclass of LayoutGroup.

• Automatically starts up Starling, behind the scenes.

• Customize context3DProfile.

• Set the theme.

• Additional application classes based on Drawers and StackScreenNavigator.

<?xml version="1.0" encoding="utf-8"?><f:Application

xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:f="library://ns.feathersui.com/mxml"theme="feathers.themes.MetalWorksMobileTheme"context3DProfile="baseline">

<f:layout><f:VerticalLayout

horizontalAlign="center"verticalAlign="middle"/>

</f:layout>

<f:Button id="button" label="Click Me”/>

</f:Application>

Inline components• <fx:Component>

• May be used with sub-component factories.

• Support outerDocument property to access parent MXML document.

<?xml version="1.0" encoding="utf-8"?>

<f:List xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:f="library://ns.feathersui.com/mxml">

<f:itemRendererFactory>

<fx:Component>

<f:DefaultListItemRenderer

labelField="text"/>

</fx:Component>

</f:itemRendererFactory>

</f:List>

Limitations• Flash Builder’s generates a broken application class

when creating a new project.

• No good way for the SDK to tell Flash Builder that Feathers should always use the f namespace in MXML (like it uses s or mx for Flex).

• Custom templates for new files should help with both of these.

Limitations (continued)• Flash Builder expects flash.events.Event will always

be imported, so it automatically uses the fully-qualified starling.events.Event — even when it’s not necessary.

• IntelliJ IDEA doesn’t recognize Feathers components in the MXML editor, but the code will compile. Will try to fix in the future.

Future plans for the SDK• Test with more IDEs, and

improve IntelliJ IDEA support.

• States in MXML?

• ResourceManager?

• Open to suggestions!

Thank you!Presented by Josh Tynjala

twitter.com/feathersuifacebook.com/feathersuigoogle.com/+feathersui

instagram.com/feathers_ui