Problem

When you’ve got a vector shape with a bitmap (like jpg, png, etc) on top of it, both nested in a movieclip or sprite, you’ll experience quirky alpha behaviour. You’ll see the outlines of the bitmap image when the container’s alpha value falls below 1, even if the colors of the vector shape and the bitmap image are the same color. The pixels of the vector layer and the bitmap layer don’t behave as being 1 layer. You can make them do so by applying a layer blendmode to the sprite.

To apply a layer blendmode to your MovieClip, do this:

myMovieClip.blendMode = BlendMode.LAYER;

Here an example of the different behaviour (source: CS5 fla file)

So I searched the Eclipse preferences panel and discovered that my solution was just sitting there all the time. Here it is:

• commons-net-2.0.jar (download)
• jakarta-oro-2.0.8.jar (download)

Save these files in the following folder: /Applications/FDT3/plugins/org.apache.ant_***/bin/

Now goto: Preferences > ANT > Runtime > Classpath

The screen should be like the one below.

Now click ‘Add External JARs’ button and select the 2 files you just added ( /Applications/FDT3/plugins/org.apache.ant_***/bin/ ). Now click ‘apply’ and then ‘ok’.

Next thing is to add code to your build.xml file, which contains all your ANT tasks.

To use FTP from within ANT you’ll need to add something like this to your build.xml file:

<target name="ftp_upload" description="uploads files through ftp">
  <echo message="uploading files" />
  <ftp server="123.456.78.90"
       port="21"
       remotedir="/www/ant_upload_test"
       userid="my_user_id"
       password="my_password"
       passive="no"
       depends="yes"
       binary="yes">
       <fileset dir="../bin" />
  </ftp>
</target>

Now you’re ready to go.

Extra info:

Good tutorial for using ANT with FDT

The official ANT homepage

More info about FTP options in ANT

Have you been struggling with Photoshop while exporting your image for the use inside a website or web-application? You’re probably seeing your images with less sparkly colors and having a ‘washed out’ look to them, when you used the ’save for web’ option. Well, if you didn’t, you probably wouldn’t be reading this post The cause is a pretty simple one and it’s called ‘document color profile’.

This is what the Photoshop CS3 helpfiles have to say about the document color profile:
“Document profiles define the specific RGB or CMYK color space of a document. By assigning, or tagging, a document with a profile, the application provides a definition of actual color appearances in the document. For example, R=127, G=12, B=107 is just a set of numbers that different devices will display differently. But when tagged with the AdobeRGB color space, these numbers specify an actual color or wavelength of light; in this case, a specific color of purple.”

So what is happening?

While you are editing your picture within Photoshop, each pixel of that image is getting a color correction by Photoshop. This correction is defined by the color profile which is assigned to the document. Usually, this is a ‘default color profile’ which is added to the document by Photoshop itself. You can choose which color profile has to be added to each document by default in the ‘color settings’ panel (edit -> color settings).

Now as you can see, the default value for the RGB working space is Adobe RGB(1998). But this is an inappropriate color profile for web development.  It was designed to encompass most of the colors achievable on CMYK color printers, but by using RGB primary colors on a device such as the computer display. This profile was intended for editing images for professional printing via a fully color-managed workflow which allows for a wider gamut. Not really appropriate for the web, huh?

So what the heck do I need to do then?

This where the answer enters a fuzzy area. Different people advertise different solutions. Martijn, a colleague of mine at Ottonico, simply disables color management on his documents. This can be done by opening the ‘Assign Profile’ panel (edit -> assign profile). The result is that the “working RGB” setting is not used and this other profile is applied.

This already improved colors consistency drastically, since you’re already editing your PSD without the ‘prepress colour profile’.

Still, color profiles exist with a reason and we can’t deny that most browser developers are steadily implementing the sRGB profile. It’s being endorsed by the W3C , Intel, Panton, Corel, Exif and many other players in this market and is the de-facto standard for WWW graphics. This doesn’t mean that it’s actually used a lot at the moment, but it’s the standard which is being pushed. Now most software is designed with the assumption that an 8-bit-per-channel image file placed unchanged onto an 8-bit-per-channel display will appear much as the sRGB specification dictates. One can generally assume, in the absence of embedded profiles or any other information, that any 8-bit-per-channel image file or any 8-bit-per-channel image API or device interface can be treated as being in the sRGB color space [source : wikipedia]. So for browser-graphics, but also for Flash content (which doesn’t use color workspaces), this profile would be the most appropriate color workspace.

What I recommend is to change your settings in Photoshop in a way, that you’ll always know in what color space you are working. First of all, make sure that the default profile is the sRGB profile. Second, enable Photoshop to alert you when you are opening or pasting images that have another profile attached to them. That way you’ll always be sure that you won’t be working with different color workspaces for the same project.

Some people work with the “monitor LCD profile” enabled, but since that doesn’t represent the sRGB profile and thus NOT the image that the average internet user will be seeing, this seems a wrong way of editing your images.

Futureproof

As always, it’s best to work with a focus on the future. I feel that it’s a good thing to embed this profile, since these profiles will be used more and more in the browsers to come (Safari and Firefox 3 already support it). An embedded color workspace won’t bother browsers or Flash players in displaying the image, but it does give the browser the possibility to use the image to its biggest potential. Future Flash players and webbrowsers will support color spaces more and more. Wouldn’t it be a shame to omit a color space then?

While working on the Tommy Hilfiger Denim website, I encountered an extremely weird error. After deploying an alpha version of our work to our staging environment, I found out that on other machines the flash player only showed a blank screen and didnt execute any code at all. I checked the lack of code-execution by trying to trace a message to FireBug. Regrettably, the Firebug console stayed empty…..

After several tests it appeared that the website was working only on browsers with the Flash 10 Debug Player and simply died instantly after initiation on browsers with the regular Flash player 10. Yes….. you’re reading this correctly. It’s exactly the opposite of what you’d expect! The app crashes on the regular player and works fine on the debug player. The debug player didn’t even display an error message!

Cause

After traversing the code line by line, the problem was found when my co-workers were complaining about all the hairs lying around. Since I start every method with a call to my Debug class (which traces/logs a message to my trace panel “Trazzle“), it’s usually very easy to see where the code breaks when you’re not in a debug environment. It appeared that within the Debug class, there was a RegEx statement that killed the entire execution of code inside the regular Flash player:

We used this line to show stracktraces inside FireBug, but somewhere something went wrong

Solution

We didn’t find a solution for this problem, but simply removed this line of code. We weren’t using Firebug tracing anyway. If anyone knows what the problem could be, you’re welcome to let me know!

You can check it out at www.oneill.com

Update (14 april 2009)

Oh yeah….. we won the FWA (Favorite Website Award) Site of the Day at 10 april 2009 with this project!

___

___