Recently I’ve been working on an iPad app at my second (third?) job, and I wanted to share some of the stuff I learned about Flash UI design, particularly for those working in Flash Professional CS6.
Adobe hasn’t done the most excellent job with creating components or built-in classes for some really important UI standbys (scrollbars, I’m looking at you) so I went looking for some alternatives. What I ended up going with is a quite excellent open-source UI library called Feathers, which runs on the also open-source Starling framework.
Unfortunately most of the documentation out there is for folks using Flex or Flash Develop, which are great tools, but I use Flash Professional at work (and before you ask, my work computer is a Mac so I can’t get Flash Develop). It took me a while to figure out even the simplest configuration in CS6 so I thought I’d make a short presentation/tutorial to pass the knowledge on and hopefully help someone out.
As an aside, I should point out a few things that may have made this more difficult for me than it would for someone looking into Feathers for a new project. I’m a fairly advanced, but largely self-taught, Flash programmer. I don’t have much outside experience with programming so I do find some of the design patterns that Feathers uses new and confusing. If you are coming from a design background, this is going to be a bit of an uphill battle, but it’s totally doable. If you’re a pro programmer already (like Jeff!) than you’ll probably be just fine. The other problem was that I needed this system to work for me on a project that was already fully programmed in regular AS3. That meant I had to shoehorn Starling/Feathers into an otherwise normal Flash project, and I’ve come to learn that this isn’t the “normal” way that people come to start using Starling. Unfortunately there was no way to start over with the project as it has been in use for a few years now and we were just putting the final touches on the iPad port. So a lot of my frustration came from getting Starling to play nice with Flash. I would definitely recommend going all-Starling if possible.
My HaikuDeck follows. You can also view the slide commentary on the actual Haiku Deck website here: http://www.haikudeck.com/p/ejEjtaUD87/feathers-for-mobile-ui
Created with Haiku Deck, the free presentation app for iPad
What’s Starling?
Starling is a Flash framework (library), mainly used for running games in Adobe AIR on mobile devices (iOS and Android). You can download it at http://gamua.com/starling. Starling is neat – it runs directly on the GPU using stage3D, so essentially it’s super fast and supports 3D. I haven’t had a change to play around with it outside of this project, but it sounds quite powerful. You’ll need Starling to run Feathers.
Ok, what’s Feathers?
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 at http://feathersui.com. Take a minute to check out the components explorer too – it’ll give you a good sample of the kind of stuff you can make with Feathers.
Configuration
You need to change a few settings in order to set all this up. I don’t know why, but I had a terrible time figuring out the file paths necessary to make all this work. My solution follows (and will work with the demo files).
Set publish to AIR (iOS or Android)
This one should be obvious – you’re working with a file you intend to be published on a mobile device, so your publish settings need to reflect that. Side note: If you use a version below AIR 3.4, you might run into problems. You need Flash Player 11 for all this to work out of the box and I suspect that older versions of AIR are also using older Flash Players.
Set render mode to “direct”
If you read the directions on the Starling site, this will come up. Because of the way Starling uses the GPU, you need to set the render mode in the AIR settings to “direct”. If you don’t, you’ll get a big warning when you try to run the SWF.
Add Feathers and Starling SWC to Library Path
In the Actionscript settings you can add new SWCs to the library path. The one for Starling is in the “bin” folder. The Feathers one is in the “swc” folder. You’ll need both. In the screenshot, you’ll see that Flex/Core frameworks were also added. These are added automatically by Flash Professional the first time you run the SWF (you’ll have to accept a dialog box and then re-publish).
Add the theme source files to the Source Path
In the source path, also in Actionscript settings, you’ll add the theme source folder. For the demo, it’s VICMobileTheme > source.
A note on themes: The theme that comes packaged with Feathers is called MetalWorksMobileTheme, and you might want to start experimenting with this before using my theme or trying to make your own. You will probably have to skin your theme at some point though, so the tutorial I used is here. Note that you need the TexturePacker software, which costs about $30.
Setting up the code
There are a few parts to this, but it only amounts to about 25 lines to get you started using the FeathersComponents class included in the tutorial.
- Import Starling and Feathers classes
- Initialize Starling
- Get the Starling root
- Format your list as an array of objects
import starling.core.Starling;
import starling.events.Event;
import ca.pie.feathers.FeathersComponents;
var starling:Starling = new Starling(
ca.pie.feathers.FeathersComponents, stage
);
starling.start();
starling.addEventListener(
starling.events.Event.ROOT_CREATED, init
);
var gui:FeathersComponents;
var fruitArray:Array;
var words:String = “Put a lot of words here!”;
function init($evt:starling.events.Event):void {
gui = FeathersComponents(Starling.current.root);
gui.addEventListener("actionPerformed", onListClick);
fruitArray = new Array (//Put a long array of objects here!);
//These are custom functions from the FeathersComponents class
gui.initMainList(fruitArray, new Rectangle(50, 150, 300, 300));
gui.initScrollText(words, new Rectangle(450, 150, 450, 140));
}
function onListClick($evt:starling.events.Event):void {
alertText.text = "List item labelled " +
gui.currentListItem.description + " was chosen.";
}
One of the things I was particularly interested in was the List component in Feathers, which creates a scrolling list of items that are selectable, which is why that’s included in the demo. You can read all about it on the Feathers site/API, but basically the List takes an array of objects as its data provider. If you’re not familiar with the syntax, an object literal looks like the following:
{description: “Words to go in list”, accessorySource: myTexture}
You can have as many properties as you want, but these two are pretty basic. The first one, which I called “description” in the FeathersComponents class, is the actual description that will show up in the list item’s box. It’s a String. The other property, accessorySource, defines a texture (which is the Starling equivalent of a Bitmap). The texture can be applied to the list like an icon. You don’t need this, but I wanted to show how it works in the tutorial files. So, the actual array looks more like this:
fruitArray = new Array (
{description: "strawberry", accessorySource: gui.sArrowTexture},
{description: "apple", accessorySource: gui.sArrowTexture},
{description: "grape", accessorySource: gui.sArrowTexture},
{description: "rhubarb", accessorySource: gui.sArrowTexture},
{description: "orange", accessorySource: gui.sArrowTexture},
{description: "pear", accessorySource: gui.sArrowTexture},
{description: "raspberry", accessorySource: gui.sArrowTexture},
{description: "elderberry", accessorySource: gui.sArrowTexture},
{description: "clementine", accessorySource: gui.sArrowTexture},
{description: "guava", accessorySource: gui.sArrowTexture},
{description: "kumquat", accessorySource: gui.sArrowTexture},
{description: "starfruit", accessorySource: gui.sArrowTexture},
{description: "canteloupe", accessorySource: gui.sArrowTexture},
{description: "banana", accessorySource: gui.sArrowTexture},
{description: "watermelon", accessorySource: gui.sArrowTexture},
{description: "passionfruit", accessorySource: gui.sArrowTexture},
{description: "mango", accessorySource: gui.sArrowTexture}
);
That’s all you need to get started. The two methods being called,
gui.initMainList
and
gui.initScrollList
come from the FeathersComponents custom class. They both take a Rectangle as an argument as a way to determine their size and position on the Stage. (You can’t put Starling display list items in items on the Flash display list, so you can think of everything sitting right on the stage, or technically beneath the stage).
But wait, there’s some weird stuff
Starling runs on the GPU and as such, its display list is actually completely 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. This was a bit of a pain in the ass with an existing project, so this is one of the major reasons that you should consider going all the way with Starling if you’re creating a new project.
Text will appear tiny when testing in Flash Professional’s AIR debugger. It’s fine on the actual device so don’t panic.
Starling has different terminology for some display features. Since technically everything in Starling is created in 3D, a Rectangle becomes a Quad, and Bitmaps are now Textures (stretched over a flat plane in 3D). You’ll get used to it.
As mentioned earlier, Starling has its own version of lots of stuff that exists in AS3. These will clash with the Flash namespace so you have to spell things out for Flash. Basically Starling was trying to name things the same as Flash so AS3 programmers would already understand the syntax and terminology. Starling has its own MovieClip, display list, and Event model. When you want to use one, you have to call it a new “starling.display.MovieClip” or new “starling.events.Event”. That’s all fine, but keep in mind if you have a duplicate in Flash, you also have to go back and change all your Flash MovieClips to “flash.display.MovieClip” and events to “flash.events.Event”, otherwise the compiler gets all confused and unhappy.
That’s the worst of it though. After my 2 weeks of slogging through figuring out Feathers and making components work, I was able to give my tutorial and files to a few coworkers and we got everything working in another Flash project within a few hours, so there’s hope!
Recent Comments