Images Converter Flex Air App

September 13th, 2010 by Slav

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!

Image Converter Screenshot

Features  :

  • support for additional cca 40 image formats (via ZaaIL library) , see below full list of supported image formats.
  • support for saving individual Photoshop layers
  • support for dragging multiple files (including dragging multiple PSD files)
  • images preview
  • conversion progress feedback
  • user preferences and the window position and remembered
  • some bugs were fixed in the psd parser , so should be a bit more stable now…

The following image formats are supported : bmp, blp, cut, cur, dicom, dcm, dcx, dds, exr, ftx, fits, gif, hdr, hdp, icns, ico, icon, iff, ilbm, iwi, lif, mdl, mp3, pbm, pgm, pcx, pcd, pic, pix, png, pnm, psd, psp, pxr, raw, rot, sgi, bw, rgb, rgba, sun, texture, tga, tpl, utx, vtf, wad, wal, wbmp, wdp, xpm, jpg, jpeg, jpe, jp2

The source code can be downloaded here and the app itself here.

Enjoy!

Posted in AIR, AS3, flash, Flex, Flex 4 | 8 Comments »

Photoshop layers to images AIR application

September 10th, 2010 by Slav

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.

You can see and download the source files here and get the app here.

Posted in AIR, AS3, Flex 4 | 15 Comments »

Photoshop file format importer / parser in flash AS3

August 11th, 2010 by Slav

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 :

and this is the same file in Photoshop :

What is currently supported :

PSD FILE :
  • Parsing  canvas width x height
  • parsing file color information (number of color channels, color depth, color mode)
  • parsing file’s composite bitmap snapshot
  • parsing all layers and layer folders
Layers :
  • parsing layer bitmap data
  • parsing layers bounds and position
  • parsing layer name
  • parsing layer ID
  • parsing layer blend mode
  • parsing layer colour channels
  • parsing layer alpha
  • parsing layer filters
  • parsing layer extra  properties such as : isLocked, isVisible, clipping applied
  • parsing layer type (normal, folder)
What is  not supported but planned for the future :
  • layer  masks
  • layer paths
  • layer vector shapes
  • parsing text layers as formatted string
  • parsing layers with zip (with or without prediction) compression
As photshop != flash, there are , and will be some necessary incompatibilities. Although I tried to support all the crossover features, not everything will look the same  after import
here are some gotchas :
  • Layer alpha in flash is layer opacity in Photoshop..Layer Fill values are ignored.
  • Incompatible photoshop layer blend modes are interpreted as Normal blend mode
  • 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.
Note on the layer folders / layer groups :
Layer groups are being parsed and they are also PSDLayer class type.

To identify them you need to check for the layer type:

There are 4 layer types :LayerType_FOLDER_OPEN, LayerType_FOLDER_CLOSED , LayerType_HIDDEN and LayerType_NORMAL.

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…

Posted in AS3, flash, Flex, Flex 4 | 32 Comments »

Flex case file nu 261.. “The mysterious case of disapearing type”

June 11th, 2010 by Slav

sample

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.

Posted in AS3, flash, Flex, Flex 4, Personal | 9 Comments »

Programmatic datagrid itemEditors in Flash Builder / Flex 4

June 3rd, 2010 by Slav

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 :

<fx:Declarations>
<fx:Component id="inlineEditor">
<mx:TextArea />
</fx:Component>
</fx:Declarations>

and then in your code define itemEditor refering to the id attribute of fx:Component :

datagridCol.itemEditor = inlineEditor;

Simple, isn’t it.

Posted in AS3, flash, Flex, Flex 4 | 10 Comments »

Augmented reality helicopter

July 13th, 2009 by Slav

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

AR Chopper

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

You can view the demo here and right click to view the source.

If you don’t have a web cam watch screencast here.

Posted in AS3, Augmented Reality, Flex 4, papervision | 12 Comments »

Integrating Papervision3D into the Adobe Flash Builder Sparks containers architecture.

July 7th, 2009 by Slav

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 :

PV3D in Flex 4

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.

e.g. :

scene.addElement(new BasicView3D);

Check out the sample and right click to view source script and download the entire project.

Posted in AS3, Flex 4, papervision | 14 Comments »