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…

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.

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