Browsing: User Interface

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

Wii experiments by Johnny Chung Lee part2

March 1st, 2008 | By Cedric

wiiExperiment 019 Wii experiments by Johnny Chung Lee part2  image

I made an entry about some weird experiment, the wii sensor fingers.
At the time I posted it, I did not know much about its author. I have found that it does plenty of other interesting tests. His name is Johnny Chung Lee, he is a Ph. D. Graduate Student at Human-Computer Interaction Institute.

2 new amazing tests

Johnny Chung Lee made other amazing Wii experiments which I am linking here.
I like very much the cheap whiteboard and may try it in few weeks.
I think it is a good tool to make presentations with added waouw effect.
But I was absolutely overwhelmed by the glasses experiment, it bring such a depth to the image it is very impressive how everything is changed in term of effect and relation to a 3d universe.
spacer Wii experiments by Johnny Chung Lee part2  image
Low-Cost Multi-touch Whiteboard using the Wiimote:

spacer Wii experiments by Johnny Chung Lee part2  image
spacer Wii experiments by Johnny Chung Lee part2  image

Head Tracking for Desktop VR Displays using the WiiRemote:


spacer Wii experiments by Johnny Chung Lee part2  image

For sceptics

Well, from here I can hear people arguing that it is not very revolutionary and that plenty of diverse labs around the world have tested and developed and sold such approach and technologies. But in this case, this solution is very cheap, meaning that it may spread quickly and bring new uses of the wiimote technology. On this point, I wonder if they are legal issues developing independent commercial products making use of the wiimote. Another question is: how unique this technology is and does a cheaper solution exist using standard components?

Nintendo wish list

I wonder if I may use the Head Tracking trick to play FPS like Quake or Metroid. icon wink Wii experiments by Johnny Chung Lee part2  image Hey Nintendo what are you waiting for? Please could you sell a Metroid Samus helmet with Head Tracking?
In the 90th I played on an arcade with 3d helmet and complete immersion in a 3d universe. It was a very fun experiment despite the fact that you had to push a button to go forward. Can you imagine what it might be using the Wii Balance Board with the Metroid IR Head Tracking helmet. (They should have put on Wii system support for 12 controller ports icon wink Wii experiments by Johnny Chung Lee part2  image )

Dr. Futurity Yokoi

I think Head tracking and 3d environment will be integrated in our every day life in the futur, as will be augmented reality. I am convinced for a while now that the next big portable groundbreaking system by Nintendo will be immersive glasses and air sensors. A true Nintendo Virtual Boy without monochromes red screen and heavy metallic stands. I am looking forward to seeing the next portable generation and I guess it will features benefiting from Wii technology.
spacer Wii experiments by Johnny Chung Lee part2  image