Randy Troppmann

If HTML5 is a shield, then Flex is the sword.

Randy — Wed, 18 Jan 2012 17:09:54 +0000

There is plenty of activity going on in the Apache Flex incubation and one current initiative is the development of a new logo. In true open source fashion, there is a contest going on (yesterday was the last day for submissions) and soon there will be a vote. You can see all the submissions here.

Above is my submission. I had a lot of fun thinking about what I wanted to say in a logo. My initial goal was to create a logo that, in terms of visual impact, would hold its own with the HTML5 shield if they were both to appear in a document. That’s important visually and symbolically. The idea that a sword complements a shield just naturally flowed from that. I don’t see this as a “versus” approach. A sword and a shield work together. This design is brash and whimsical.

I remember the HTML5 shield getting a lot of criticism when introduced, yet look how well it works. It was 30 feet high on the screen at the Max keynote and looked amazing. Imagine this logo beside it.

Flash Builder for PHP install workaround

Randy — Mon, 07 Nov 2011 17:52:25 +0000

I have a quick project that might benefit from the workflow offered by Adobe Flash Builder for PHP so I thought I would download the trial and see what it is all about. The Zend framework combined with AMF looks interesting. Unfortunately there were some unexpected road blocks.

I believe FB-PHP is designed to install and run beside your existing Flash Builder install. At this time I’m still not sure. The installer refused to complete the process because of a “beta version” of Flash Builder already installed. I uninstalled Flash Builder and ran the installer again which completed the process successfully. When I ran FB-PHP it complained about a conflict with my current CS5 license and requested that I deactivate and enter a compatible license key.

I found out from Adobe that there is indeed a conflict with the CS5.5 licensing scheme which is a bug. Their instuctions are to (temporarily) deactivate CS5.5. Launch and activate FB-PHP with a S/N you can get from here: https://freeriatools.adobe.com/fbphptrial/ and then reactivate CS5.5. See this technote for more information.

AIR 3 enables hardware decoding of H.264 video in iOS apps

Randy — Fri, 07 Oct 2011 16:46:10 +0000

Previously it was not possible to achieve hardware decoding of streaming H.264 video in AIR-made apps on iOS, perhaps served in a multi-bitrate manner . I KNOW, huh? It is, in fact, a very specific requirement for achieving quality video playback on devices. And it is now possible because of AIR 3 and a few other technologies that have been released recently by Adobe.

First of all there is OSMF 1.6 which was release a couple weeks ago. As far as iOS is concerned, the most important feature here is the seamless support of StageVideo. This enables close-to-metal high-performance hardware-decoded hardware-rendered video. Within the context of an AIR application there are a couple boilerplate items, in addition to using OSMF ver1.6 to playback your video, that you need to add to your AS3 or Flex project in order to enable this performance.

add this compiler argument to ensure it targets Flash Player 11:
```
-swf-version=13
```
set the rendermode item in the app descriptor file to “gpu” or “direct”
```
gpu
```

Secondly, and it’s a biggie, is that you need to point to a streaming service using the recently released FMS 4.5. It is the support for Apple’s HLS (HTTP Live Streaming) support that is required. (By the way, the “Live”, as in rhyming with “hive”, refers to VOD as well as Live. I like to think of it as that which rhymes with “give” and I am less confused). And since you have access to the latest greatest FMS technology you may as well use a manifest file and several versions of the video encoded at different bit rates to take advantage of the dynamic-mutlibitrate-switching support made possible by various parts of this technology stack. OSMF makes this easy by accepting a URL pointing to the manifest file and everything is taken care of.

The final ingredient is AIR 3. FMS 4.5 can be used to stream video directly to iOS using mobile safari which is a great solution, but the user is presented with the default iOS video player. Perhaps you want to provide a customized video experience and an app made with AIR is just what you need. AIR version 3 to be more precise. With the Flash api at your disposal, so much is possible. AIR 3, released this week, is the final enabling piece of the puzzle in achieving in-app video nirvana on an iPad. Use AS3-only or Flex Mobile projects with Flash Builder to build an awesome and unique video service, and AIR 3 to package it up and sell it on the app-store.

Determining playback bitrate in an OSMF video player

Randy — Wed, 21 Sep 2011 19:12:36 +0000

NAIT has been using my custom video player for years which has seen several updates and redevelopments over time. A year and a half ago I completely rebuilt the player using Adobe’s OSMF library and it has worked flawlessly. The recent release of OSFM 1.6 spurred me on to revisit the player to bring it up to date. A lot has changed in the last year and a half, the most significant item being StageVideo.

I was really happy to see that merely swapping out the OSMF.swc library and recompiling was all I needed to do. No errors. This alone made the work around incorporating OSMF worth it. The only consequence of this update is the minimum Flash Player version required is now 10.1.

One item I finally figured out was how to determine total bitrate during video playback. NetStream has a NetStreamInfo property (called info) which contains all sorts of juicy info, but OSMF does not have any public API for getting access to the NetStream instance. With a lot of googling I found that the not-documented MediaTraitType.LOAD trait has a reference to the NetStream object and can be accessed this way:

var mediaLoadTrait:Object = mediaPlayer.media.getTrait(MediaTraitType.LOAD);
var netStreamInfo:NetStreamInfo = mediaLoadTrait.netStream.info;

NetStreamInfo has a property of playbackBytesPerSecond which is what I needed. We use this information for monitoring quality of service. Note that this is bytes per second and most people talk about bitrate as kilobits per second. According to google you need to multiply this number by 0.0078125 to determine the kbps bitrate.

Linking to local files in StageWebView

Randy — Tue, 20 Sep 2011 20:32:23 +0000

I have been working with StageWebView in a Flex Mobile AIR project recently. StageWebView uses the native web view on whatever device the AIR app is running. This means the text scrolling is very responsive and you inherit a bunch of functionality that an AS3 based component does not offer. For example, on Android you get pinch zoom and auto text-reflow. I need the text to have simple formatting which includes hyperlinks that link to other “pages”. It just so happens that storing the files in individual html files and loading them into a StageWebView instance solves this use case nicely.

It’s not so simple though. A hyperlink touch fails to load the local page since the StageWebView tries to go out to the web to load the URL supplied by the anchor tag. I found the solution was to hijack the page load on the LocationChangeEvent.LOCATION_CHANGING event and replace it with content loaded from the local html file using an URLLoader. You can see my code example here: http://github.com/randytroppmann/StageWebView—linking-local-files/blob/master/src/GreyRectangleStageWebViewBug.as.

Adobe AIR App Challenge, Sponsored by Sony!

Randy — Tue, 19 Jul 2011 23:46:20 +0000

I would love to participate in this contest but Canadians are not eligible so your chances are that much better to win! Here is a message from Adobe:

Join Adobe and Sony for a webinar to learn about the exciting opportunities to bring innovative apps to Sony Tablet devices, including the just announced Adobe® AIR®App Challenge, Sponsored by Sony www.airappchallenge.com. Adobe and Sony are challenging developers, agencies, and content creators to build breakthrough apps for the upcoming “Sony Tablet” devices using Adobe AIR 3 and Adobe® Flash® tools for a chance to win $200,000 in total cash prizes, premium promotion on Sony Tablet devices, conference passes and paid travel to Adobe MAX, and more prizes. In the webinar you’ll learn about the unique features of the Sony Tablet S1 and Sony Tablet S2, as well as how you can be one of the first to gain prerelease access to the tablets, the latest version of Adobe AIR runtime and tools and other benefits. Encourage your peers to attend the webinar and enter the Challenge – you or someone you know can be one of the first selected as a Finalist by submitting an app or app project now!

Join us on Wednesday July 20, 2011 at 11:00AM – 12:00PM PDT or 7:00PM – 8:00PM PDT

http://www.adobe.com/cfusion/event/index.cfm?event=detail&id=1851799&loc=en_us

StageVideo in Flex mini-gotchya

Randy — Mon, 11 Jul 2011 20:29:49 +0000

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.

Flex Mobile for iOS has arrived

Randy — Mon, 20 Jun 2011 16:51:56 +0000

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.

Purely mobile AS3 workflow with Flash Builder 4.5

Randy — Tue, 12 Apr 2011 15:36:15 +0000

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.

Keith Peters on JavaScript

Randy — Wed, 06 Apr 2011 16:35:47 +0000

Keith Peters had an EPIC MONTH of writing. Each day of March he published a blog post on JavaScript. I want to read and digest them all along with the comments (blogging FTW). So I made my own post that conveniently links to each article. Thanks for your passion Keith!

March is JavaScript Month. And… Introducing WireLibJS
JavaScript Day 2
JavaScript Day 3
JavaScript Day 4 : Canvas Basics
JavaScript Day 5: Writing Code
JavaScript Day 6: WireLibJS internals
JavaScript Day 7: Animation
JavaScript Day 8: More WireLibJS Internals
JavaScript Day 9: Wrapping up WireLibJS internals
JavaScript Day 10: Tools, Part 1

JavaScript Day 11: Tools Part 2: Minification!
JavaScript Day 12: Links!
JavaScript Day 13: Rewriting WireLibJS
JavaScript Day 14: prototype
JavaScript Day 15: Particles
JavaScript Day 16: More Particles
JavaScript Day 17: Color
JavaScript Day 18: Linked List
JavaScript Day 19: Images
JavaScript Day 20: SpriteSheets

JavaScript Day 21: Text on Canvas
JavaScript Day 22: Transformation
JavaScript Day 23: Shadows
JavaScript Day 24: Curves
JavaScript Day 25: More Art
JavaScript Day 26: Mouse Part I
JavaScript Day 27: Mouse Part II
JavaScript Day 28: Creating a UI Component
JavaScript Day 29: Pixels
JavaScript Day 30: More pixels
JavaScript Day 31: The End