Randy Troppmann

I was playing around with the new Flash-based stage video api using Thibault Imbert’s tutorial. I used Flex to build my proof of concept and tried to stream video from our FMS server via RTMP. It all seemed pretty straight forward but for the life of me I couldn’t figure out why I could only hear and not see the video. Of course! Stage video sits behind everything on the display list and all I had to do was set my base application to have an background alpha of 0. I love simple solutions.

Things are moving so fast. Last fall I released an app for Android using Flash Builder and Adobe AIR. I remember thinking how great it would be if I could package up the same app for iOS. AIR for iOS? Will never happen. (I was wrong. More about that in a bit). After all, it had only been a month or so since Apple modified their terms of service once again allowing cross-compiled apps onto the app store. Adobe had pretty much abandoned their iOS efforts and AIR had progressed significantly over the previous 6 months.

In fall 2010 Adobe reintroduced the “packager” for iOS on their Labs site which allowed developers to cross compile Flash and AS3 projects to apps that ran on iOS. Spring 2011 Flash Builder 4.5 was released which included a version of ADT that included the iOS packager and enabled the FB build process (no command line mess) to create iOS apps from AS3-only projects. Missing from FB 4.5, however, was the ability to create a Flex-based mobile projects targeted for iOS. It was still possible to use the command line to craft a command to get ADT to build an iOS app out of your Flex Mobile project. But running this app on an iPad showed that Flex Mobile via AIR on iOS was not quite ready for primetime; the performance was not great.

The recent release of AIR 2.7 has changed all that. With this release Flex mobile apps run with “native” performance on iOS. The difference is astounding! It’s just magical. I have no idea how they did it, but kudos to the Adobe engineers.

This has paved the way for Flash Builder 4.5.1 to now support iOS in the Flex Mobile AIR project wizard. You will now see three target platforms: Apple iOS, Blackberry Tablet OS and Google Android. How sweet is that? It’s only going to get better.

The version of AIR in FB 4.5.1 release is confusing, however. Officially, FB 4.5.1 uses and supports AIR 2.6. However if you build an iOS app it will indeed use AIR 2.7 to build it. This is confusing! You would think that Adobe would sync the release of AIR 2.7 with their FB 4.5.1 release but it looks like that did not happen. I’m sure that the next update to FB will fix this.

Flash Builder 4.5.1 is available as an updater patch for FB 4.5. If you don’t have FB 4.5 installed you can download a 60 day trial from here.

I like building apps with “pure as3″ because it makes me feel like I am programming closer to the metal. A pure AS3 project uses only ActionScript and does not use the Flex framework in any way but still uses mxmlc, the Flex compiler, to create the final swf. The result is a very compact swf that contains just the code it needs to do the job. There is, however, a price to pay. There is no data-binding, layout manager or mxml and it generally takes a lot more effort to make a polished app.

Flash Builder 4.5 provides a new workflow for building mobile applications making it much easier to develop and test apps. A new project wizard called “ActionScript Mobile Project” takes a lot of the pain out of setting up your mobile project and points you in the right direction. The dialog guides you through specific decisions up front so that in the end the project will compile a package for the targeted platform with little fuss. (That is if you avoid the iOS platform, which will require a bunch more fuss.)

Mobile Permissions in Flash Builder 4.5 "Actionscript Mobile Project" wizard

A new “ActionScript Mobile Project” has one class that contains two important lines of boilerplate code:

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

The absense of these lines is a gotchya for those new to AS3-only development and needs only to be declared once. If you intend to utilize multi-touch you will need to set the input mode:

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

Also consider setting the StageDisplayState:

stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

Now you are ready to code up some app magic.

On-device testing is much easier now. Simply connect your Android device via USB and you can run or debug your app directly from Flash Builder. This feature was not available when I developed RunningMap Trackometer last summer and I find it to be a huge help. If you are running in debug mode, traces show up in the Flash Builder console.

The "Run Configuration" dialog lets you specify where to run the application when testing: on your desktop or on a connected device.

Use “Export Release Build” to prepare the final binary or package that can be submitted to the appropriate app store. Be forewarned: each app store has it’s own peculiarities, agreements, requirements and hurdles. FB does it’s best to get you over the hurdles … but it can only do so much.

So there you have it: end-to-end creation of platform agnostic apps with ActionScript and Flash Builder. Since mxmlc is used to build the swf, Flash Professional is not required in this workflow. But don’t count it out out! I still lean on Flash Pro and Adobe Illustrator heavily to create visual assets that get embedded into my AS3-only projects. And … Flash Pro has it’s own end-to-end workflow for building apps if that’s how you roll. The Flash Pro code editor has been improved and is now somewhat tolerable to use. Just feels a little further from the metal.

An important lesson I learned today: the onRegister() method of a Mediator in the RobotLegs framework get’s fired when it’s view is added to the stage. This means that the event mappings and event listeners that you place in the onRegister() method will get invoked each time and (assuming you are adding and removing the view multiple times) unless you use the onRemove() method to un-map and remove the event listeners, you will most certainly get a memory leak. Good to know!

This is a little inconvenient because I was hoping that I could use the mediator event handlers to update a view while it is not on the display list. As it turns out, the mediator will not respond to event mappings when it’s view is removed from the stage. Also good to know.

Any input on this appreciated!

Axiis is the open source data visualization framework Tom Gonzalez talked about at Adobe Max earlier this month. Watch his presentation here. At this session Tom announced the release of Beta 1.0 of the library which is built upon Flex 3.

I recently finished and deployed a complete rewrite of the map mashup RunningMap.com which uses Axiis to display elevation data in a line graph. After seeing his presentation 360|Flex last May I decided to give the (then alpha) Axiis framework a try. Upgrading to the Beta 1.0 release was painless and immediately I noticed the drawing performance of the graph went from slow(ish) (which actually was not a bad effect) to instantaneous.

Connecting my data source to the graph was a challenge and I had to use the debugger to get the data wrapped “just right”. I put together an example that illustrates:

• use of Axiis LineSeriesGroup
• wrapping an array collection “just right” so it can be bound as a data source
• overlaying the graph on a map
• setting the data tip using a function

The live example is here which is source view enabled.

I am building a widget to show routes for Runningmap.com and thought I would give Axiis a try for the elevation graph. The examples show a couple techniques for connecting a cvs formatted or xml source file as the data source for the graph. Connecting my ArrayCollection of value objects stumped me however. Tom Gonzalez was kind enough to guide me to the solution which was to wrap the collection in just the right way so that Axiis could get at the data. The rest was, as I expected, magic.

Wrapping the collection looked like this:

Then set the "plotCollection" and "dataField" properties in the LineSeriesGroup:

And here it is:

Converting FlashVars parameters to properties is an example where you are forced to deal with strings and sometimes these values need to be numbers. I have been annoyed with with my own inconsistencies with how I test to see if the FlashVar casts correctly or should be rejected (because it had a character other than a number in the string). I was discovering that some techniques were giving false negatives. So I spent some time of trying to establish a best practice.

I considered these four techniques for casting a string to a Number:

1. parseInt("1234");
2. new Number("1234");
3. "1234" as Number;
4. Number("1234");

Below is the AS3 code and the trace results which I used to base my conclusions here.

Results:
Using "as Number" to cast a string to a Number looks like bad news to me. All other techniques preformed as expected. Casting a string such as "foo" using "as Number" to cast is to a strongly typed variable results with a false value when isNaN() is applied to it. This is the false negative I mentioned before. Even casting the string "1337" using "as Number" results in the value 0 which not only fails the falsies ternary test but is wrong.

Conclusions

• don't use "as Number" to cast a string to a Number.
• Using a "falsies ternary test" is not a great approach for string to number validation since "0" is a valid number and will correctly fail this test. Maybe that works well for your logic anyhow.

Discussion
Casting is perhaps the wrong term since I am converting a primitive to an object which isn't true polymorphism, but perhaps string is being treated as an object.

I talked to Ryan Frishberg at the recent 360|Flex in Indianapolis about this. Ryan works on the Flex SDK team at Adobe. He said that "new Number('foo')" make use of conversion methods that are not available to the technique "'foo' as Number" which will evaluate to null since this casting is not possible. String can't be a Number. Ok, that is the d'oh moment for me. Should know better.

It's problematic though, because it fails to report a run-time or compile-time error.

I recently attended a 3-day "entrepreneur bootcamp" where angel investors taught how to pitch an idea to angel investors for investment capital. One of the first things they will want to know is how you protect your intellectual property. In the case of software, protection of algorithms is key and in the case of Flex your software secrets are protected from a right click "view source" since the application is contained within a compiled swf. Tools are available, however, that allow you to easily decompile the swf and look at the goodies inside.

Simplified Logic Inc has a product that uses a private key encryption method that stops decompilation of the swf. They also have developed a backend system that can manage licenses to your application. I have been developing a Flex application for use in teaching anatomy to students at the technical institute I work at. It has proven to be a powerful tool and there is opportunity to license this application to other institutions, but there is no infrastructure to do this. I have built a proof of concept using Nitro-LM to show that we can deploy this application on the web using a Software as a Service model without creating much of a deployment infrastructure on our end beyond what we already have in place.

The NitroAdmin AIR app is used to set up and manage the encryption and licenses. Videos and examples show how to integrate the system into your Flex app but I think they need to do a bit more work around this ... perhaps a "wizard" or video that shows from start to finish the basic setup. It still took a bit of handholding to get me up and running (thanks Andrew). The proof of concept is doing its job of proving this works in a way that is unobtrusive to users. Now all that is left is the easy part: to build a business model around my application and then go out and sell it. That is someone else's job.

Simplified Logic was a major sponsor of the recent 360 Flex conference in Indianapolis. I want to say thanks to them for supporting this event. It was a good one and I enjoyed the environs.

The conference in Indianapolis was fantastic and the sponge is full. Met so many fellow developers. Was accused of stalking Adobe employees, but I only said hi to Matt Chotin once. So much to experiment with. FlexUnit 4 is important. Degrafa looks compelling. Will definitely look into Axiis data visualization library. I am intrigued by Maté as a framework. OpenFlux ... Yes!!!! ESRI has a new free mapping API ... BAM. Lazy loading datagrid using cacheing and synchronization (props to Zach Pinter) ... I need that. According to Jeff Tapper's 7 golden rules of how not to code in Flex, I should have been fired 7 times. RSL's! RSLs! RSLs! But my favorite session was by Doug McCune. He talked about stuff that re-inspired him as a developer.

This slide is about how Flex application development became a job, and nothing much more than that.

Doug's live demo on head tracking in Flash. He showed an application that can be used for "Safe Sexting". You can do whatever you want on the video and your face will be tracked and blurred. Big laughs on this one.

Doug had a unique take on how to push the concept of Augmented Reality. He gave himself boobs in this live demo.

As Flash and Flex applications get more complex the ability to watch trace statements while running the application in a browser is invaluable. This is how I do it (in OSX):

1) find your mm.cfg file. Mine is located here: ~username/mm.cfg (substitute "username" with your real username)

2) open it in a text editor and add these lines:

3) open a terminal window and add this to your .profile file.

To watch your browser throw trace statements, just open a terminal window and type "trace" and they will now appear in the terminal window.