Feathers For Mobile UI
Published on Nov 18, 2015
No Description
MORE DECKS TO EXPLORE
PRESENTATION OUTLINE
FEATHERS FOR MOBILE UI
Photo by castillobg
WHAT'S STARLING?
(A FAST 3D DRAWING API FOR AIR APPS)
Starling is a Flash framework (library). You can download it at http://gamua.com/starling
You need Starling to run Feathers.
You need Starling to run Feathers.
Photo by Jean-Jacques Boujot
OK, WHAT'S FEATHERS?
(A MOBILE-FRIENDLY UI LIBRARY)
Feathers is a UI library that runs on Starling. It creates pretty UI elements for mobile devices, like scrollbars that don't suck!
Download it here: http://feathersui.com/
Download it here: http://feathersui.com/
Photo by sqrphoto
THIS SOUNDS COMPLICATED.
It is, a little bit. You should be an intermediate programmer in order to attempt the tutorial. It'll help if you know your way around Flash and how classes work, too.
Photo by Jean-François Chénier
LET'S GET STARTED!
Photo by Alexandre Moreau | Photography
CONFIGURATION!
- Set publish to AIR (iOS or Android)
- Set render mode to "direct"
- Add feathers & starling swc to library path
- Add theme source folder to source path
- Ready!
Untitled Slide
You can access your publish settings in the "Properties" panel of the stage (make sure you aren't selecting any objects). We need to modify both the AIR and ActionScript properties.
Untitled Slide
See the Render Mode? That's what we're changing. Make sure it's set to "Direct".
Untitled Slide
Ok, in the ActionScript settings, you need to set the Library Path and Source Path. In Library Path, link to the feathers swc file and the starling swc file. They're pretty easy to find (obviously you have to have downloaded both frameworks). The flex/core stuff will be added automatically the first time you try to publish the swf.
Untitled Slide
In source path, you should navigate to your theme's "source" folder. I am using a custom theme, but the theme that comes with Feathers is called MetalWorksMobileTheme.
That's it for configuration. Seems easy but it took me awhile to figure out!
That's it for configuration. Seems easy but it took me awhile to figure out!
CODE!
- Import starling and feathers classes
- Initialize starling
- Grab the starling root
- Format list as array of objects
- Ready!
Untitled Slide
Add the import statements so Flash can find starling. If you go to my blog (linked at the end of the presentation), you can download the example files that include the FeathersComponents class that I made.
Untitled Slide
Now we're initializing starling with the custom FeathersComponents class, starting starling, and adding an event listener for when the starling root is created (we need this in order to access our class and call methods on it).
Untitled Slide
Untitled Slide
In your callback function, first make sure you are setting the proper event type in the function parameters. We're listening for a starling event, not a flash event, so you have to spell it out for flash (if you are using flash events too then you will always have to write the full path to differentiate them).
We're going to set the starling root to a variable called gui. This is used to call functions and properties of FeathersComponents (here we're making a scrolling list and scrolling textfield).
We're going to set the starling root to a variable called gui. This is used to call functions and properties of FeathersComponents (here we're making a scrolling list and scrolling textfield).
Untitled Slide
Side note: Your lists have to be formatted a certain way. The Feathers list expects an array of objects.
The FeathersComponents class will look for a property called "description" which will end up as the words that are displayed in the list.
The FeathersComponents class will look for a property called "description" which will end up as the words that are displayed in the list.
Untitled Slide
Untitled Slide
Ok, this is just a quick function to run when you click on a list item, so you can see that it works and is storing a reference to the object for further manipulation.
THE WEIRD STUFF
- Starling objects always under display list
- Text appears tiny when testing with Flash Pro
- Technically everything is 3d - quads/textures
- Starling display list/events clash with Flash
Starling runs on the GPU and as such, its display list is actually underneath the flash display list. So if you need things to overlap and you are modifying an existing file, you will need to make everything Starling objects so they overlap properly.
Text will appear tiny when testing. It's fine on the actual device.
As mentioned earlier, starling has its own display list, movieclips, events, etc. These will clash with the Flash namespace so you have to spell things out for Flash.
Text will appear tiny when testing. It's fine on the actual device.
As mentioned earlier, starling has its own display list, movieclips, events, etc. These will clash with the Flash namespace so you have to spell things out for Flash.
BUT IT'S VERY PRETTY :)
Looks great though! Check out the Feathers demo if you don't believe me!
http://feathersui.com/examples/components-explorer/
http://feathersui.com/examples/components-explorer/
Photo by ecstaticist
Untitled Slide
Check out our blog for a downloadable demo and the FeathersComponents class.
http://axondigitalarts.com/2013/11/09/starling-and-feathers-for-flash-cs6-m...
http://axondigitalarts.com/2013/11/09/starling-and-feathers-for-flash-cs6-m...
