Browsing: Stage3D

Papagui Skin templates for Feathers Starling

October 12th, 2012 | By Cedric

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: https://github.com/maddec/papaguiskin/

201210 articleImg papaguiskin big Papagui Skin templates for Feathers Starling image

Introduction:

  • 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/ppg.ai (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\AzurePpgMobileTheme.as
  • 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

Conclusion

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