In the previous post I introduced an air app that can parse photoshop layers and save it out as pngs or jpges. In this post I thought I upped the game a bit to make the app hopefully even more useful. I remembered the times I just needed quickly convert dozen or so icons (in ico format) to transparent pngs and there was really no elegant and quick solution. Well.. That’s thing of the past now. Enter Images Converter!

To turn my PSDParser into something useful for more general use I decided to make an Air app that enables user to drag’n’drop a photoshop file unto and saves the layers as images into a user selected directory.

App parses the photoshop file, finds the layers it can parse, uses the layer name as a filename. User can select the output image format as either jpg or png. Images are being cropped to their content bounding box.

If png is selected , alpha values are being preserved. If jpeg is selected, the output quality is customisable.

If “Always save to desktop” option is selected, app creates the directory called “_psd2imagesExport_” on the user’s desktop and save’s the files there.

For a recent Flex CMS project I needed PSD importer so I went googling in a hope for a decent PSD parser. I found only one somewhat usable project which was essenialy a Java port of this parser that imported psd files into flash..

The problem with this parser was in supported only very, basic, plain psd files, and adding anything (like a folder group for example ) would break it. So I decided to write my own one instead.

As you might have heard psd isn’t exactly the easiest format to parse, so rather then starting from the scratch I based a portion of the code on the Munegon’s parser, also referenced Yet another PSD parser by Jonas Beckeman written in java. Quite helfull was this Python PSD parser and of course an official PSd file format specifications document from Adobe.It was still lot of trial and error, as even official CS format specification docs aren’t complete and contains errors. But at the end I got this :

Only 4 filters / layer effects are currently supported (drop shadow , inner drop shadow , glow, inner glow) but even these need to have to be applied with normal blend mode, as flash doesn’t support a filters with a different blend mode as the display object they are applied to. For example it’s perfectly possible to have an photoshop layer in screen mode with drop shadow applied in multiply mode, but it flash you don’t have a blend mode settings for a filter..

only layers with RAW or RLE compression are being parsed at the moment.. So if you don’t see the layer bitmap data it’s probably compressed with zip compression.

Layer folder hidden is marker for the end of the layer group. So if you want to parse the folder structure, check where the layer type folder starts and then every layer that follows is inside of that folder, until you reach layer type hidden.

How to use this parser

Very simple. You just create instance of PSDParser (it is Singleton) and then call “parse” method , passing the content of your psd file in byte array format.

The parsing is synchronous so after that line, you will already have all the file/layers info available..

I’ve made 2 apps that should help you get started.

PSD Viewer is a simple flex app that allows you to load and view psd files and reads the supported layers, while showing their blend modes, visibility , lock, alpha , layer effect etc, in “Photoshop-esque” style. View source is enabled so you can get the source code from here. (If you don’t have the psd file to test use the “testPSD1.psd” file from flex project’s “assets” subfolder).

Simple example is a basic single class as3 app that just loads the psd file and then on click cycles through the layers, bringing the one in the back to the top.

Enjoy!

PS: As this is still early beta, some PSD files may/will break the parser (especially those with unsupported features (see above) or those not saved in compatibility mode…

This example is taken straight from Flex 4 Cookbook. It demonstrates how you can search inside of data grid.

Works fine, that not the problem.

The problem is , once you select any cell in data grid an return the the textfield.. you are unable to type anything! Tried different flex 4 sdks tried testing in IE, FF, Chrome .. no luck.

I had it happening in a different project, where I am working with much more complex data grid with custom item renderers and editors, so I chose Flex 4 cookbook example to test if it’s happening in a very simple scenario as well. Also that book was written by Flex experts, so I wanted to confirm it’s not me using the Flex in the wrong way..

EDIT: It seems it’s not happening on all computers? On my colleague’s machine this works fine it seems.Does anybody have the same problem as me ?

EDIT2: Solution found!This weird behaviour was down to the flash plugin/active X..

it wasn’t working correctly in version 10,1,50,426 .. but when I upgraded to 10,1,53,64 all works as expected! Must have been some glitch in the plugin.

anyway, I’ll leave this post here, in case somebody will have similar problem.

While building a multilingual copy editor module for Flex 4 CMS system, I’ve encountered a following problem:
I have a editable datagrid with variable heights.The problem is, default itemEditor for a datagrid is an input textfield which is a single line , but I need a multiline editor such as text area.

Solution is simple of course, you just assign a editor=”mx.controls.TextArea” in the datagrid ‘s column definition.

That might work , if you are creating a columns in mxml.

I however create columns dynamically..It turns out you can’t assign TextArea to a columns editor directly:

dataGridCol.itemEditor = "mx.controls.TextArea"
will not work as the itemEditor must implement IFactory , which TextArea (or other similar components) do not!

So what can you do in this case ? Well, you could build a custom class component that does implement IFactory and give’s you a newInstance method that returns the component you need..

or..

there’s much simpler solution.You put your component definition in the fx:declarations block like this :

Augmented reality is slowly becoming perhaps somewhat of a bevel effect/lensflare among the technology enthusiasts, but actually it’s only beginning to creep into consciousness of the “marketing people” (as I call them) so I though it’s high time I joined the ranks and pop my AR cherry. : – )

This demo is based on excellent ar tutorial by Lee Brimelow, you should definitely check it out if you want to play with AR.

One thing I discovered, the marker pickup up by FLARE toolkit can be quite tricky at times and it really helps if you do apply a threshold filter to an input bitmap data.

I added basic flying controls to helicopter and a helipad plane to ground it on the surface..

Demo was build with Adobe Flash Builder demo, but the most important class extends UIComponent, so should be easily transferable to Flex 3.

It all started when I decided to try out the new Flex 4 Beta. The aim was to build Collada viewer that loads the dae files from the users’ filesystem / harddrive using new flash 10 FileRef API. What seemed like a pretty straightforward task turned into a Nightmare Lite after I realised I can’t just grab a new BasicView and dump it into a new sparks group container! The problem was, the group container didn’t support rawChildren.addChild(), as it didn’t contain rawChildren property.

After spending couple of hours trying and failing I came upon a working solution :

Use UIComponent as a wrapper for a BaseView which is implemented via composition. UIComponent is compatible with Sparks containers and can be added via addElement(); Thankfully UIComponents allows adding BaseView via addChild.. If you need to access a camera, scene, light etc, just use public variables on your UIComponent class to expose them and link them to your baseview camera lights etc.

This simple example utilises camera and materials light color change, but you can expose and change anything you like of course..

It is implemented directly inside of mxml but of course you could still have a group with id (let’s say “scene”) and add the whole component BasicView3D programmatically.