Browsing: Adobe Air

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

Adobe AIR tips serie: browseForSave set default file extension and validate/modify.

November 17th, 2008 | By Cedric

postImage 01short Adobe AIR tips serie: browseForSave set default file extension and validate/modify. image
spacer Adobe AIR tips serie: browseForSave set default file extension and validate/modify. image

In this serie I propose some quick tips for Adobe AIR products developers, which came out during my regular practice of this technology. Today topic is:

Conforming extension for a browseForSave.

This short tip allows you to ensure that the file which will be saved following a browseForSave match legal extension you have defined beforehand and if not it will apply a default extension when using the browse for save functionality. Currently File.extension is a read only property and you cannot change it directly, so I decided to manipulate the path in order to allow it. I think a setExtension and allowedExtensions property might be useful in such a situation.

import flash.filesystem.File;
import flash.filesystem.FileStream;
import flash.events.Event;

private var docsDir:File;
private const MY_DEFAULT_EXTENSION:String = "abc";
private const VALID_EXTENSIONS_LIST:Array = ["abc"];

public function mySave():void
{
	docsDir = File.desktopDirectory;
	docsDir.browseForSave("Save As");
	docsDir.addEventListener(Event.SELECT, mySaveHandler);
}
private function mySaveHandler(event:Event):void
{
	docsDir.removeEventListener(Event.SELECT, mySaveHandler);
	//Split the returned File native path to retrieve file name
	var tmpArr:Array = File(event.target).nativePath.split(File.separator);
	var fileName:String = tmpArr.pop();//remove last array item and return its content
	//Check if the extension given by user is valid, if not the default on is put.
	//(for example if user put himself/herself an invalid file extension it is removed in favour of the default one)
	var conformedFileDef:String = conformExtension(fileName);//comment: updated 17.11.2008 removed the typo
	tmpArr.push(conformedFileDef);
	//Create a new file object giving as input our new path with conformed file extension
	var conformedFile:File = new File("file:///" + tmpArr.join(File.separator));
	//Make save
	var stream:FileStream = new FileStream();
	stream.open(conformedFile, FileMode.WRITE);
	stream.writeUTFBytes("demo demo demo demo demo demo demo demo demo");
	stream.close();
}
private function conformExtension(fileDef:String):String
{
	var fileExtension:String = fileDef.split(".")[1];
	for each(var it:String in VALID_EXTENSIONS_LIST){
		if( fileExtension == it)
			return fileDef;

	}
	return fileDef.split(".")[0] + "." + MY_DEFAULT_EXTENSION;
}

Feel free to add any comment!

spacer Adobe AIR tips serie: browseForSave set default file extension and validate/modify. image