This document summarizes a presentation about the upcoming Feathers 2.2 release and the new Feathers SDK. Key points include: Feathers 2.2 will include new layouts, transitions, retina desktop themes, and a media player framework. The Feathers SDK will allow using Feathers components in MXML, with features like binding, inline components, and an Application subclass that starts Starling. Some limitations are Flash Builder project generation and IDE support, but future plans include improving this.

1. A preview of Feathers 2.2
(with the first look at the Feathers SDK)
JoshTynjala / Flash Online Conference #12 / 2015 May 29

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

3. Feathers 2.2
• New layouts.
• New transitions.
• Retina desktop skins.
• Media players.

4. FlowLayout
New Layout

5. WaterfallLayout
New Layout

6. Iris
NewTransition

7. Wipe
NewTransition

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

9. Media Players

10. It’s a media
player
framework
Because every video player
looks a little bit different.

11. Building a media player
• Create a newVideoPlayer 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.

12. Media Player Controls
• PlayPauseToggleButton
• SeekSlider
• TimeLabel
• VolumeSlider
• MuteToggleButton
• FullScreenToggleButton

13. SoundPlayer Example Code
var 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";

14. Anything else in Feathers 2.2?
• Performance improvements in Lists, item renderers, and text.
• Fixed issues in BitmapFont andTextBlock text editors to
properly support non-Latin characters.
• More unit tests for improved stability.
• Build and test onTravis-CI after every push to Github.
• Bug fixes and minor features.

15. Feathers SDK

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

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

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

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

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

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

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

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

24. Future plans for the SDK
• Test with more IDEs, and
improve IntelliJ IDEA
support.
• States in MXML?
• ResourceManager?
• Open to suggestions!

25. Thank you!
Presented by JoshTynjala
twitter.com/feathersui
facebook.com/feathersui
google.com/+feathersui
instagram.com/feathers_ui