Flash CS4 Export As 24bit+Alpha PNG Solution
Today I was going through some design files that were sent to me to be added to a website I’m helping to develop. The designs were drawn in Flash CS4. I needed to work with these files in Photoshop, so I went to export the files as a 24-bit PNG with Alpha and blending, except Flash decided it wasn’t going to play nice.
The picture on the left is how the image appears in Flash, and on the right is the exported PNG. The problem is that Flash wasn’t correctly handling the alpha during export. So instead of the smooth edges in the left image, we have the ugly aliased edges seen on the right.
What I needed was the alpha information, or at the very least, an alpha mask. Since Flash wasn’t behaving, here’s how I made one:
- Export the image twice; once with a black background, and once with a white background. Instead of exporting as “24 bit with alpha channel”, simply export it as “24 bit”. Other than the background, the images should be identical.
- Open both the images in Photoshop, and put them in the same document.
- Select the top-most layer, and set its blending mode to “Difference”.
- Merge the layers (Layer > Flatten Image).
- Invert the document (Image > Adjustments > Invert).
What you should now have is a greyscale image. The background should be black, and all the features white.
- Select the entire document, and copy it.
- Open one of the images you exported, and create a new layer mask (Layer > Layer Mask > Reveal All).
- Paste the greyscale image into the mask.
You should now have an image with perfectly smoothed edges. If you notice a slight white or black outline surrounding the edges, you can use “Defringe” or “Remove White\Black Matte” from the Image menu.
Enjoy!
Friday, March 20th, 2009 @ 04:56 PM • Next Related Post •
Responses
There are 6 responses for this post.
Comments are open, you can write a comment below.
Yeah Flash used to keep edges really nice and smooth when you exported to png. I can’t get Flash CS4 to create nice png files like older versions of Flash used to, where they maintained the edge alpha. Flash CS4 puts pixel black edges onto all my .png images it creates
This new bug of Flash’s has been driving me crazy too, I wish Adobe would just fix it, since I’m exporting images a lot and need those edges clean.
Though the process detailed here works, there IS a faster way.
Export you image as a .ai (Adobe Illustrator file) and then in Illustrator you’ll have to re-size it the document to match the dimensions. Then from there do “Export to web” export it as the PNG you wanted in the first place… and lo and behold! It’s exported correctly!
Still though… what a pain. -_-
I came across this same problem and found the cause to be one of the items that I had drawn and converted to a symbol was causing the issue. I removed that item from the workspace and it exported in 24bit with the alpha with no problems.
I’m Having a similar problem, though it is sort of backwards to what you are experencing. I was given a job from a client, it’s a pre-built flash video, and all the objects and text are inside a pre-built Photoshop document. I’ve been asked to clean to video since it wasn’t set out too nice.
The problem I am having is when I import new .png files into this flash document from photoshop they look fine, but as soon as I turn them into a Symbol and use an alpha tween they turn to crap. The pre-existing .png objects from the previous dsigner are fine, any ideas what I may be doing wrong?
I’m more of a print designer so any help on this situation would be great!
I’m having this same problem trying to export an image SEQUENCE. Is there any way to resolve the problem within Flash so I don’t have to fix over 80 images, one by one? Plus, I have some blending modes on so they won’t transfer over to Illustrator.
Eric, what was the problem that was in the symbol you deleted? I’m curious.
If you also choose ‘Export Movie’ and then choose ‘PNG sequence,’ this also resolves the horrible black-outline problem from version CS4. Better than me attempting to re-install CS3 after having installed CS4!