Articles Tagged: air

everything related to Adobe AIR and application development using Flash Platform, AIR for desktop, AIR for mobile, AIR for TV, tips, best practice, tutorials

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: 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

Adobe Hair Head Application update

June 2nd, 2009 | By Cedric Madelaine

033 adobe hair head application 300x204 Adobe Hair Head Application update image

Adobe HAIR Update

A few month ago, I have “Launched Adobe Hair”. I have not been having much time to blog about it, I would like to explain it and thanks people who blogged about it. Check out the interview Michael Chaize did at the Adobe Max Press room, below:

spacer Adobe Hair Head Application update image

So what?

I had got this idea a long time ago. The initial purpose was to make an Haircut including analogd ‘s logo with a few other graphic elements. Then to be photographed from the back and design a Greetings Card for analogd’s clients. Unfortunately the end of year is always very busy and I never had time enough to release it.

I thought it was a good idea to make it for Adobe Max. It was also a way to “celebrate” my 10 years of Flash productions (started with Flash 2) and using the Adobe logo was also a tribute to my years with Adobe Softwares (Started with Photoshop 2.0 and Illustrator 3.0). In addition I decided to make the whole looks a bit 3d using perspective lines extending the logo because I have been keen on 3d depth within Flash productions for years now.

Thanks

All in all I had a very positive feedback about Adobe HAIR at Adobe Max. It helped me to meet people or to let people find me back. Often in those crowded environment it is hard to find people back and I have observed that some has chosen flashy shirts to be easily identifiable. For me it played the same purpose and was very efficient even at the Adobe official party.

Now it is time to thank Michael Chaize who took time in the Adobe MAX Press room to take footage of Adobe HAIR and made it public.
Guess who hold the camera?
Thibault Imbert icon wink Adobe Hair Head Application update image By the way big up for his work on AlivePDF which I used a lot recently and which is just great, more on that later…

I was also honored that Ben Forta blogged about Adobe Hair Head Application. Thank you icon wink Adobe Hair Head Application update image

I know that it isn’t something that much original and nothing to be proud of icon wink Adobe Hair Head Application update image and I am not, it was just a matter to thanks people and say that I had fun preparing this (one hour and an half to the Hairdresser) and meeting People at Max Europe 2008. So stay tuned on analogd’s blog to receive Adobe Hair updates…
By the way if you took pictures of Adobe HAIR or blogged about it please let me know.
Last but not least I discovered that Adobe Hair Studio exists icon wink Adobe Hair Head Application update image

By the way do not forget to register to the Vintage Flash User Group (vfug), I am managing on Linkedin:

vfugStickerWebFlag Adobe Hair Head Application update image

spacer Adobe Hair Head Application update image