Tuesday, April 13, 2010

Bending Pixels with Flex 4

Artima.com has posted one of the demos from my book Flex 4 Fun in an article on their site. Check out Bend your Pixels with Flex 4 to see a simple example of using a Pixel Bender shader to get a grayscaling effect on an image.

8 comments:

DLSalahi said...

Chet,
I've purchased Flex 4 Fun and I downloaded the source code but can't get any of the projects to run. I get a warning about needing a more recent version of Flash Player. It's claiming I have V9 installed but I have V10 (in both FF, my default browser, and IE). I've verified that on the Adobe Flash Version Test page.

If I ignore the warning it crashes at launch:
VerifyError: Error #1033: Cpool entry 21 is wrong type.

I've tried cleaning, reimporting into a different workspace, changing the player version in the compiler setting but nothing works.

Any suggestions?

David Salahi

DLSalahi said...

Actually, I was able to work around it by editing the .actionScriptProperties compiler flag to:
htmlGenerate="true"
(was false) and then fixing the error in Flash Builder (had to recreate the HTML)

Dave

Chet Haase said...

@DLSalahi: Weird - I haven't seen this problem before. I'm not sure what could cause it. My first thought was that you might be using the earlier IDE, Flex Builder 3. If that were true, I was going to suggest changing the minimum Flash player version in the preferences (or upgrading the tool).
But since you said "Flash Builder", it sounds like you've already got the version you need.
I do have the projects set up to launch in standalone mode (I find that easier when writing/debugging projects). Maybe you don't have a standalone version of the player, or that version is too old to deal with the apps? In that case, your workaround of enabling HTML is putting the apps back into the browser where you do have the correct version.

I should probably update my projects to have them run in the browser instead of standalone, in case others have this problem.

Thanks for reporting the problem (and apparently the fix)!

DLSalahi said...

Found another bug. On p. 20:

var circle:Ellipse = new Ellipse();
circle.width = 100;
circle.height = 100;
circle.fill = new SolidColor(0x0000ff);
circle.x = 100;
addElement(circle);

the line:
circle.fill = new SolidColor(0x0000ff);

doesn't compile. There's no fill property on Ellipse in the current SDK.

Similarly,the Adobe docs page:
http://help.adobe.com/en_US/FlashPlatform//reference/actionscript/3/spark/primitives/Ellipse.html?allClasses=1

the example MXML code at the bottom shows properties fill and stroke but neither of these properties is accessible in ActionScript. Yet, the MXML compiles and runs with those properties. I thought there was supposed to be a 1:1 correspondence between MXML and AS. What gives??

DLSalahi said...

OK, I found a clue regarding Ellipse by looking at your ThreeCircles example. The downloaded file builds and runs. But if I remove the 5 lines of code at the end which define an Ellipse in MXML then that circle.fill line fails to compile! (After removing those 5 lines have to then import Ellipse so that it recognizes Ellipse but that still doesn't prevent an error with the fill property.)

So, what's going on here? Is Ellipse being subclassed by the MXML ellipse definition??

Chet Haase said...

@DLSalahi: There's no mystery here: you generally need to import classes that you use in Script code. So if you create an Ellipse in Script code, you should import spark.primitives.Ellipse. And if you use SolidColor, then you should import mx.graphics.SolidColor.
But if the class is already used in a tag in MXML, then the compiler auto-generates an import for us in the generated ActionScript code. If you then remove the Ellipse or SolidColor objects from the MXML code, the compiler won't auto-generate those imports and the compile will fail because the script code is referring to a class that's not imported.
You can see what's happening in the generated code by using the -keep-generated-actionscript=true flag in the compiler options; check out the 'generated' folder in the bin-debug directory. That will show you the code that MXML is being pre-processed to and the imports that it creates based on the MXML tags you use.

DLSalahi said...

Chet,
Thanks for your reply. You're right, the missing SolidColor import was the problem in my modified version of your ThreeCircles file.

However, that's not the issue in my other test of that code. Originally, I copied the six lines from p. 20 of your PDF book and pasted them into a new MXML app that I had created. In that case, the error was on the same line but it was about the fill property. Here's my code:

import mx.graphics.SolidColor;
import spark.primitives.Ellipse;

private function init():void
{
var circle:Ellipse = new Ellipse();
circle.width = 100;
circle.height = 100;
circle.fill = new SolidColor(0x0000ff);
circle.x = 100;
addElement(circle);
}

As you can see, there is an import for SolidColor. But I still have a compiler error on that line--related to the fill property:

1119: Access of possibly undefined property fill through a reference with static type Ellipse. Ellipse.mxml

And the code hinting fails to show a fill property for circle. Similarly, it fails to show a stroke property for circle. I think this is indicating a compiler bug. Your thoughts?

DLSalahi said...

Oh, I just figured it out! The problem is that my MXML file was named Ellipse.mxml. So, the compiler was creating a new class called Ellipse to match my MXML file. After renaming the MXML file the problem went away. Would be nice if the compiler could give you a clue.