Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A preview of Feathers 2.2 and the Feathers SDK

3,709 views

Published on

Flash Online Conference #12 - May 29, 2015

A preview of the upcoming Feathers 2.2, with new transitions for screen navigators, flow and waterfall layouts, and media player components. Followed by the first look at the Feathers SDK, a fork of the Apache Flex SDK to add support to the compilers for Feathers in MXML.

Published in: Software
  • Be the first to comment

A preview of Feathers 2.2 and the Feathers SDK

  1. 1. A preview of Feathers 2.2 (with the first look at the Feathers SDK) JoshTynjala / Flash Online Conference #12 / 2015 May 29
  2. 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. 3. Feathers 2.2 • New layouts. • New transitions. • Retina desktop skins. • Media players.
  4. 4. FlowLayout New Layout
  5. 5. WaterfallLayout New Layout
  6. 6. Iris NewTransition
  7. 7. Wipe NewTransition
  8. 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. 9. Media Players
  10. 10. It’s a media player framework Because every video player looks a little bit different.
  11. 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. 12. Media Player Controls • PlayPauseToggleButton • SeekSlider • TimeLabel • VolumeSlider • MuteToggleButton • FullScreenToggleButton
  13. 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. 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. 15. Feathers SDK
  16. 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. 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. 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. 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. 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. 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. 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. 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. 24. Future plans for the SDK • Test with more IDEs, and improve IntelliJ IDEA support. • States in MXML? • ResourceManager? • Open to suggestions!
  25. 25. Thank you! Presented by JoshTynjala twitter.com/feathersui facebook.com/feathersui google.com/+feathersui instagram.com/feathers_ui

×