Easy Custom Styles in Flex 4 Spark

I needed to be able to style the width and height (and percentWidth and percentHeight) of a spark group. These styles do not exist, but they are valid properties. After searching for a quick way to do this, and finding nothing about Flex 4 that worked and wasn’t overly complicated, i wrote this little ditty (I am assuming the file is called “ExtStyleGroup” within the package “com.andrewzmmit.flex”:

This component called “ExtStyleGroup” extends a Group which provides the default properties of width, height, percentWidth and percentHeight, but now are configurable as style attributes within an external CSS stylesheet. It also allows the styleMap to be updated in run time by any class that extends ExtStyleGroup on a case-by-case (per instance) basis. Next time you go to create another <s:Group />, if you prefer the flexibility over the performance overhead, just use the custom MXML component:

In that example, I could’ve imported a style sheet instead with <fx:Style source=”style.css” />, but you get the idea…

Chaining in PHP (Like jQuery)

This may be well known, but I found it interesting while reading this stackoverflow question. I may have read the OP incorrectly in retrospect.

Anyways, in order to chain methods like what is done in JavaScript’s jQuery each method in the class definition must return an instance of the class:

It can then be called in this fashion:

Which will output something like:

I’m sure some abstract classes and wrappers could be designed to easily integrate this as a flexible library. It would do the same thing for PHP as jQuery did for JavaScript.

ECMA-262: Breaking Out of Nested Loop Control Structures

PHP: Optional Numeric Argument for break

My first dynamic language was PHP and with that came the break statement which ends the execution of a control structure (e.g. for, while or case). It also “accepts an optional numeric argument which tells it how many nested enclosing structures are to be broken out of.” This optional argument is beneficial when there are nested loops that need to be terminated prematurely without adding extra logic and without halting the entire script execution (e.g. exit).

In the following example the second/nested for loop will be terminated during the first iteration, but the outer-most loop will execute tens times.

…but in the next example it will break out of both for loops resulting in $i never incrementing from 0 to 1.

JS/AS: LabelledStatement (TL;DR)

What about ECMAScript Languages (ECMA-262)? I struggled with the absence of this feature for languages based on the ECMA-262 standard like JavaScript and ActionScript. These languages (as far as I knew) have the break statement which works just like it does in PHP, but without the optional numeric argument. This made stopping nested control structures a PITA.

Well, maybe if I RTFM I would’ve been acquainted with the LabelledStatement Statement and saved myself the heartache. This can be observed in section 12 of the ECMA-262 Langauge Specification, Edition 5.1. Basically the syntax goes something like this:

Note “theLabelName” on lines 1 and 3. This is the bread’n’butter. All that needs to happen is to label the control structure using the standard variable naming convention and post-fix it with a semicolon (:). This becomes the “calling card” of that specific construct. Lastly, the break statement has an optional argument where the previously established label can be applied.

Further Reading

See ECMA-262 5.1 Edition ECMAScript Language Specification, §12, p86.

Explode RGB Unsigned Integer into Individual R, G and B Values + RGBA

At irregular intervals I need to take a RGB uint – e.g. 0 is rgb(0,0,0) and 16711680 is red (#ff0000) and convert it to an unsigned integer and visa-versa.
I need this from time-to-time and always forget. That, and somehow I misplace the code or leave it behind with my employer. I will now forget no more thanks to “Splitting an RGB uint into its separate R G B components” question on stackoverflow and this post.

RGB

Here’s the run down (in AS3)…

Convert RGB to uint (decimal):

Convert uint (decimal) to RGB:

RGBA

So after implementing some of this, I thought… "what about alpha channel support?" Well keep in mind, alpha is a graceful implementation/add-on and does not obstruct (or shift) the original data of the RGB value.

With this in mind, note that alpha is in the upper bit range (24); in hexadecimal format that is #AARRGGBB. It is doubly important to make sure that an unsigned integer is being used. With just normal RGB you can get away with a signed integer (−2,147,483,648 to 2,147,483,647) since you don’t need higher values, but you need unsigned for RGBA (0 to 4,294,967,295). For example, #FFFFFF for RGB merely equates to 16,777,215 in decimal format which is well under the 32-bit signed integer maximum (one-twenty-eight to be exact, think about it), however #FFFFFFFF for RGBA equates to 4,294,967,295 which is the exact maximum of a signed 32-bit integer (e.g. uint.MAX_VALUE).

Moral of the story: don’t use datatypes of “Number” or “int,” just “uint.”

Anyways, here’r the goods, going from uint (decimal) to RGBA (errr, ARGB?):

And going from RGBA to uint (decimal, base 10):

Further Reading

JSMin, Important Comments, PHP Port

I’ll make this quick.

JSMIN is a minification engine for JavaScript. It condenses the script by removing unecessary white space and comments. Well therein lies the problem: it strips out comments. Comments are important for licensing and when they’re removed, this is illegal.

After doing a split second of research I found the article “JSMin, Important Comments, and Copyright Violations” by Zoompf which talked about this issue and how to resolve it. Turns out there are “important comments” that have an added exclamation point at the beginning, e.g.:

Notice the “/*!” – that “!” is what makes it important. So the solution is to write an exception in the JSMIN lib to include the comment into the standard output. The previously mentioned article had source code showing the  change, but it wasn’t in PHP (I use the JSMIN port to PHP called “jsmin-php”). So I took a few minutes and wrote the replacement for the protected “next” function.

OK, so here’s the code. Lines of interest are 17 through 35, and don’t forget line 50. Lines 37 through 49 include the original code.

AS3: BitmapData.draw with Video

When drawing video/camera data to a BitmapData object the original size is not respected. After a quick search, this page as the answer: “Size mismatch when getting BitmapData from Camera”

The solution:

AS3 Stage3D: Away3D

So Away3D has been around for some time now (they’re currently in v4.0.0 beta) and I have not tasted this new hardware-accelerated library for Flash. In my previous years I worked with Papervision3D in AS2 (yes, version 2) and quickly moved to Papervision3D 2 for AS3. Papervision3D was pretty easy to use (I have a small Maya background) and actually got a chance to teach it to my students a few times as an intro to high-level 3D in my Intermediate ActionScript class. The problem was performance: I couldn’t get everything I wanted out of p3d like advanced UV mapping and high poly scenes; I should give it credit though, it did pioneer 3D for flash (AFAIK) and eventually implemented shader support and did a great job at it (e.g. phongs). It eventually fell off of my radar due to random professional reasons (like working around the clock on projects that $$) and other techy stuff.

Overview

I was looking for something with direct hardware acceleration and a few other clever native techniques. A colleague of mine told me about this thing called Stage3D, a.k.a “Molehill,” which i totally forgot about. This part of Flash renders separately from the DisplayList but just on top of the StageVideo, and utilizes the GPU (holy shit!). I was leery at first since my experience with Flash in previous had been 2.5D (two-n-a-half-D) and I wasn’t impressed especially coming from a P3D background. Apparently in my absence it had come a long way (at the time of this writing the current version is 11.2 beta). So I gave it a whirl.

I have a Gentoo mindset (even though my weapon of choice is RHEL), so I naturally downloaded the v4 beta, which I came to find had severely limited documentation (found some generated docs here, although not perfect). Found the v4 documentation, I guess someone flipped a switch at a datacenter somewhere… Not good for entry-level development into this new lib! Not to mention, the examples were AMAZING… amazingly overdone – I just wanna see how the stupid thing works; that’s great that you can generate trees and import 3DS models, congratu-fuckin-lations, but what about us n00bs, i need some practical and minimalist examples.

TL;DR: Right to the Code

After an hour of toying with it, skimming through some haphazard docs, watching for code hints and perusing around the source code I wrote this little ditty…

Hope that helps. Think of it as a kickstarter.

Development Setup

So, I completely forgot the installation steps for using Away3D. BTW, I use FlashDevelop (currently have the latest version 4.0.1RTM) and am building against Flex SDK v4.6.0, AIR 3.1 (which I think was auto-downloaded by FlashDevelop) for flash player 11.

  • For portability (but not flexibility or debugging) download the away3d core 4.0b SWC.
  • Create a new project in FlashDevelop
  • Put the SWC in the ./lib folder (or wherever… just do the lib folder)
  • In FlashDevelop right click on “away3d-core-fp11_4_0_0_beta.swc” and choose “Add to Library” – it should turn blue
  • That’s it, you’re ready to go.

I can see myself getting deeper and deeper into this sexy beast of a lib. And the fact that my CPU utilization is a big fat ZERO and i’m getting uber sweet FPS, i’m hooked. About friggin’ time Flash, about time!

Working SWF

Away3D in the player window (screen shot)

Download the ZIP containing the demo (no source code): away3d-simple-demo

Resources