FlashTip #3: What color is that thing in Photoshop

If you've ever searched on "Photoshop for Developers," you've probably noticed that most results are either really shallow or should more aptly be titled Photoshop for people who can't read the help and figure it out. So, I thought I'd post every once in a while when I find something that helps me with my real workflow as a working developer. It will probably still be shallow, but at least I know it fills a real need.

Today, I want to talk about what to do when you get a file where you need to find out what color something on a layer is, but it is so covered up in effects that the eyedropper tool won't work. If you're lucky, the designer has included a palette, but somehow that brand of luck and I seldom meet.

Recently, I discovered this simple tip to find out what color that object is (assuming it's a solid color underneath). All you need to do is click the dropdown to the right of the "fx" in the layers panel, then click the eye icon to turn off the effects.

Endless Scrolling Bathroom

It often seems that I'm drawn to questions on Stack Overflow that have to do with manipulating pixels directly. This week, I fielded a question from someone who wasn't happy with the solution he was using where he was using the graphics object and filling it with the bitmap he was trying to scroll.

I gave him syntax to do it with copyPixels, but what I gave him didn't completely solve his problem, since copyPixels doesn't automatically create multiple copies of the bitmap to fill in the area left empty when you move the graphic. I came up with some code that worked, but it wasn't optimal, and I didn't give a good explanation of why it worked.

So I thought I'd share a better solution with everyone, along with an explanation of what's happening.

Anatomy of an Endlessly Scrolling Background

Let's take the example of a background scrolling from right to left. To create a scrolling background, you need to break the image into two segments—one on the left and one on the right. The pixels on the left side of the image need to slide in from the right hand side, replacing the pixels that are sliding off. In fact, they are the very same pixels that slid off.

This means that the rectangle we're using for the source of these pixels (again, on the left side of the image), is continually growing as it is joined by more and more pixels. By the same token, the pixels on the right hand side, which are the ones that are still left after the pixels moved around to slide in from the right, occupy a rectangle that is constantly shrinking.

To complete the effect, we transpose the two rectangles so that the shrinking right-hand rectangle is on the left side and the growing rectangle from the left side of the image is on the right. Check out this demo, where the red and blue rectangles show where the source pixels are coming from and the lower animation shows the finished effect.

Download the source code.

About the Bathroom Still Life

Sometimes I walk into the bathroom and I see something like this, so I'll go get my phone and snap a picture. It's almost as if my toiletries have lives of their own. By capturing these moments, I can share that secret life in some way. I think of this one as "Toothbrush 'From here to Eternity.'"

FlashTip #2: Changing the view on audio folders

I deal with audio files nearly every day. These files are ones that have been recorded by our voice talent, so all the track information that is wonderful when you've downloaded a music file or ripped it from CD isn't useful.

What is useful is knowing how big the file is and when it was last modified. You know, like you can easily see in directories that do not contain audio files.

Not long ago, I found a way to change the view on the folder all at once, instead of having to remove all of the unneeded columns and replace them with the ones I want. All you do is right click on the folder, then select properties. Select the "Customize" tab, and you will see that "Optimize this folder for:" is set to "Music."

Now select either "General Items" or "Documents." Here is what it looks like set to "Documents."

FlashTip #1: Center on Stage

One of the things I find most frustrating about Flash CS5.5 is that checking the "Align to Stage" check box in the Align panel seems to yeild results that are not even remotely what I was expecting. For example, if I want to center an object on the stage horizontally and I have this box checked, the center of the object will align with the left edge of the window.

A quick fix I've found for centering objects on stage is simply to cut them and paste them back in. Unlike other applications, Flash doesn't paste objects at the coordinates where they started, but in the center. To paste them at their original coordinates, use Paste in Place (Ctrl-Alt-V). I normally find this annoying, but it turns out to be a great workaround to a feature that doesn't seem to be working correctly.

Is this fixed in CS6? I don't know, but I should be installing CS6 today, so I may update this post later with the answer.

Change of Direction

I haven't said much lately on this blog. Mostly that's because I am not doing Flex very much, and haven't been for a while. I did a short stint with Captivate, but now most of my work is in Flash. And, actually, I am doing more these days in AS2 than AS3. Hopefully that will change, since I am rewriting our codebase to a consistent AS3 framework.

I've decided to shift the focus of this blog away from pure Flex and more to "anything vaguely to do with the Flash Platform that I think is interesting." One of my plans is to add a new tag, FlashTips. This is a double entendre, because many if not most of them won't directly be about Flash, but all of them will be very short, like flash fiction. I am finding that Flash offers huge scope for productivity improvements for small changes in workflow that take minutes to learn.

I hope you like the change.

What's new in Flash Builder 4.5 for Test Driven Development

I love Test Driven Development (TDD), but there are some parts of it that I've found pretty painful in the released versions of Flash/Flex Builder. Given the benefits of TDD, I've chosen to grit my teeth and just bear with it. Last month I went to 360Flex, which showcased some of the productivity enhancements in Flash Builder 4.5, and I am thrilled to see that Adobe has addressed these pain points.

Automatic Class Generation

In most languages, TDD consists of writing a test, running it and watching it fail, writing code, and running it and (ideally) watching it pass. If it doesn't, keep modifying the code until it passes. In compiled languages such as Actionscript, many coders will add a step in the beginning where they write the first test before the Class under test exists. I have found this a pain in Flex 3 and Flash Builder 4, because my workflow winds up something like writing the test, knowing it won't even compile, then copying the name of the new Class. Then I'd use the New Class dialogue to create the Class, making sure to paste in the name of the Class from my Test.

Finally, I'd add the import statement so that mxmlc could compile the new Class into my test.

Flex 4.5 adds a new problem indicator that shows that something

is missing, a white question mark in an orange circle. When you see this, it means that there is a reference on that line that Flex doesn't yet know how to interpret. You'll be able to figure out exactly what by looking for the squiggly red line similar to what you see in a word processor when you've mistyped a word.

If you highlight the word and press Control+1 (Command+1 for Mac users), Flex will offer you the option of creating the missing definition. So you can create the Class definition right from the reference, no copying and pasting needed. Most of the time, Flex will even add the import statement as well.

Automatic Member Generation

By the same token, when you create a new property or method on your new Class, you can generate it the same way, by highlighting it and pressint Ctrl+1. Note that if the Class is inside a Library project, you'll still have to create the member variables or properties by hand, as this doesn't seem to work across projects as of this writing.

Refactoring Help

A lot of times I get halfway through a project and I realize that the Class really should be in a different package. One thing I hate about TDD is that it means there are way more references to a Class under test than one that is not tested. This means that you have to go in and fix the references to the Class you moved, not just in your project source code, but in all of your tests. In effect, your tests can lock you into a less than optimal directory structure.

Flash Builder 4.5 has changed all that. Just move or rename your Class, and all the references to it will update—and it won't take forever or crash Flash Builder (looking at you, Flex 3).

Flash Builder 4.5 has a lot of productivity enhancements like this, and you can get a full list here.

Changes for Running Unit Tests

When I first pointed Flash Builder 4.5 to my existing Flex 4.1 project, I couldn't figure out how to run my unit tests, because the "Execute FlexUnit Tests" menu item is now missing from the "Run" menu, and the application FlasnBuilder 4 created for my old unit tests had an error in it so that it wouldn't run. I wound up deleting those mxml files, but then I was at a bit of a loss as to how to run my existing unit tests.

It turns out that you need to right click on your Test Case or Suite and then select either "Run As FlexUnit Tests" or "Execute FlexUnit Tests." The major difference I see between these two options is that "Run As" provides a dialog similar to what you saw in Flash Builder 4 where you can select multiple Test Cases and/or Suites to run at one time. "Execute FlexUnit Tests" seems to run tests within the selected file or folder only, without offering the dialogue that would allow you to run other tests.

Once you have run a unit test from one of these right click menus, it will be available under the "Run" and "Debug" buttons in the main menu, but you can't change which tests will be run when you do this.

All in all, I see the changes in Flash Builder 4.5 as extremely positive for fans of TDD. I would like to see Adobe go a lot further, but overall this new version is a huge step forward.

Patience is a Vitrue (or something like that)

I admit it, I have been neglecting this blog. In part, that is because I've been in the midst of some really exciting changes.

Before I get into what has been going on, some background. My husband, Steve Howard, moved all the way from the UK to Mississippi to marry yours truly. Soon after he moved here, he got a contract working for a company in the North Atlanta area, and that company extended a full time offer to him. He's been working there ever since--from Mississippi.

In June, I started a contract with Johnson Outdoor Marine Electronics, a division of SC Johnson, working on the upcoming Geonav G12, which will be released March 11. This has been a fantastic experience, and I am pleased to have been a part of it.

If you've followed my posts on InsideRIA (now DevelopRIA), you know that I have been very interested in the exciting possibilities inherent in social media for developers for a long time. So when a recruiter called me to tell me that Vitrue was looking for a Flex developer, I was interested. When I found out they wanted me to develop visual tools to allow non-technical people to create and edit quizzes for Facebook, I was hooked--I have been building these types of tools for many years, and I know this is something I can ace.

Lucky for me, Vitrue felt the same way, and they made me an offer I couldn't refuse. I will be staying with Johnson Outdoors until the release of the G12 on Friday, then I'll be starting with Vitrue the following Monday. I will miss my friends at Johnson, but I look forward to joining in on the fun at Vitrue.