Papagui Skin templates for Feathers Starling

October 12th, 2012 | By Cedric Madelaine

As announced on Twitter here’s skin templates for Starling Feathers. I built these files to ease the process producing new skins (hopefully…).
I kept it simple basing on Azure theme, basic gradients, limited amount of colors. Grab it here:

201210 articleImg papaguiskin big Papagui Skin templates for Feathers Starling image


  • it is to produce easily from Adobe Illustrator to TexturePacker and then from TexturePacker to your TextureAtlas and SpriteSheets to be used in your Adobe AIR mobile projects based on Stage3D Starling + Feathers
  • Feathers Azure theme was used for this template as a reference. I have started this before MetalWorksTheme, I will provide a template based on “MetalWorks” soon
  • Illustrator template file contains every skin parts organised within named artboards. Each skin part was redrawn to use vectorial non destructive shape effects, original pixel files are available on a hidden layer. Each skin part uses global colors from a defined color set (available in swatch panel)
  • the advantage of these templates is also to allow export of multiresolution skinParts, even if currently the Feathers theme does not seem to work this way.
  • I agree, things might be more straightforward having a theme roller for Feathers, more on this later

Steps 1: hands-on

  • Get files from github: PapaguiSkin for Feathers
  • you will find 2 main folders:
    > ComponentsExplorer_papaguiGfxDemo = Flashbuilder demo project
    > graphicTemplates = Adobe Illustrator template file
  • Open template file in Adobe Illustratore CS6: graphicTemplates/azure-papaguiskin/ (papagui = ppg)
  • if a warning is displayed: “Could not find the linked file…”, it is because of placed bitmap files of the original Azure assets. Check: Apply to all, click Replace browse to following folder: [yourfolderstructure\]papaguiskin\GraphicTemplates\azure-papaguiskin\azure_originalAssets. These placed files are a given as a convenience, ignore if you don’t care
  • if you look at artboards panel (window>artboards), you can see each skin part is within its own artboard named according to skin part name (similar name to the one used in Starling Feathers theme atlas and class)
  • as a convenience I have added a hidden layer with each skin part name

201209 papaguiskin feathers starling artboardsOverview Papagui Skin templates for Feathers Starling image

Steps 2: play with colors

  • if not displayed, show swatches panel (window>swatches)
  • in swatches panel there is a color set (swatches’ folder), each have a triangle white corner. It means that colors are global, double-click one color (ideally not the first one which is the least used)
  • each of these colors were named, modify colors of the opened color swatch, then click ok
  • you can see that your change is done everywhere

201209 papaguiskin feathers starling swatchesAndGlobalColor Papagui Skin templates for Feathers Starling image

Steps 3: play with appearance

  • if not displayed, show appearance panel (window>appearance)
  • click on one of the skin parts, e.g. the button skin part, as you can see it uses effects to make corners rounded and drop shadows. It is not destructive allowing you a lot of freedom
  • try to change Round Corners appearance

201209 papaguiskin feathers starling appearancePanel Papagui Skin templates for Feathers Starling image

Steps 4: exports

  • file>export select png or tif (better non destructive but require TexturePacker 3), then check Use Artboards and define the folder to export to: I suggest to use exports/72 so you will see the update directly in TexturePacker
  • open the file: graphicTemplates\azure-papaguiskin\azurePpg_72.tps (Require that you have a license of the latest TexturePacker 3.x.x) open tps files with _legacy_2_x_x suffix if you have TexturePacker 2.x.x
  • Now your can see your changes, define the path where you would like to export and click publish

Steps 5: test in the demo project

  • paste your published files to ComponentsExplorer_papaguiGfxDemo\assets\images
  • open your IDE import/setup ComponentsExplorer_papaguiGfxDemo project
  • ComponentsExplorer_papaguiGfxDemo is similar to feathers-examples ComponentsExplorer. Although I modified ComponentsExplorer_papaguiGfxDemo\src\feathers\themes\
  • this file has some little modifications: first assets atlas identifier have each ppg_ as prefix (to allow a straightforward workflow). Second, file path where modified to match the new files name (atlas and spritesheet). Third, some commented lines where added to allow you to test with provided Castlevania and Metroid themes (basic color changes + font changes of AzureTheme)

201209 papaguiskin feathers starling skinColorsDemo azure Papagui Skin templates for Feathers Starling image
201209 papaguiskin feathers starling skinColorsDemo metroid Papagui Skin templates for Feathers Starling image
201209 papaguiskin feathers starling skinColorsDemo castlevania Papagui Skin templates for Feathers Starling image

Why an Adobe Illustrator template file?

  • artboards: one step export ideal to export numerous skin parts at once or for multi-resolution assets preparation
  • global color swatches: change colors globally for the whole parts, easy theming
  • symbols: like in Flash use instances of symbol, modify the symbol and every instances are updated (e.g. used for callout arrows)
  • flexible: shape effects and visual effects (e.g. dropshadow)
  • flexible: vectorial assets can be mixed with bitmap based assets(or layers or placed bitmap files). Those can be prepared in HD (350, 400?) at high resolution and then all parts exported to corresponding resolutions e.g. 163, 264, 326


I hope this will be useful to somebody. Please make suggestions or comments. I feel it is not the ideal solution, but still can improve a little the workflow for Starling Feathers. It can be also a first step to build more advanced theme for Starling Feathers. It seems to me that ideally we could build a Flex theme reusing the original FXG files. But I will make a MetalWorks theme template first. To me the ultimate objective being to have a iOS and Android theme? What do you think? I am waiting for your comments and suggestions before preparing the MetalWorks template.

Updates 8 tools to save money daily series: sixth Lynx Text Browser

February 3rd, 2011 | By Cedric Madelaine

Other tools in this series :

eigth, seventh, sixth, fifth, fourth, third, second, first

There are tools or application or software, even small, that change the way you work or the way you think/create. You will find in this series a classification which list the best for me, some of these tools are just useful software to perform specific tasks, some changed the way I work or create, all in all the ROI is huge. Of course this is very personal and depends on the field you work in.
I classified my favorites starting from the one I use currently the least or has the least influence among all program I use every day (8) to the application I use the most or which has the most influence on my daily work (1). I have excluded big software like Adobe Creative Suite, for instance, to focus on small pieces of software between them that makes the great difference in a daily work practice.
I observed that often this kind of classification are just copy/paste from each official website. I give here my true hands-on practice of each preferred application or tools or software out of any official marketing message. I explain simply from my perspective why I think they are the best and what I feel it is useful and helpful and efficient.

8 tools to save money daily list chart classification header 8 tools to save money daily series: sixth Lynx Text Browser image my 8 tools to save money daily

6: Lynx Text :

Platform: a lot
Price: free
Field: SEO
Is a Plugin: no
Mobile version: no
Software a service: no

Lynx is a browser software which browse pages as would any search engine. Pages are displayed as simple text. This is a well known tool for any professional in SEO or occasional SEO people. It is great also to preview what visually impaired people receive as data.

8 tools to save money daily lynx text browser seo google 8 tools to save money daily series: sixth Lynx Text Browser image

lynx text browser for seo

Stay tuned for other posts in this series for more time and money saved !