One of the major announcements that came out of Adobe MAX was the availability of AIR 2.5, which is the first SDK to support televisions as an output. While most of you may be scratching your heads as to why this is a big deal, the few of you who have ever attempted to write an application for a STB (set-top-box) or directly for a television know that they are one hard nut to crack.
Generally, up to now if you needed to push an application to a television-connected device, (including DVD players, Blueray players, STBs, or TVs themselves), you either had to learn the vendor’s propriety language, go with the vendor’s interpretation of Java, or just pay them to make the app for you. Additionally, it has only been a very short while that the manufactures have even given the developers the ability to push apps to these devices (with Samsung really paving the way in the past few months).
In comes Adobe with their OpenScreen Project, where they are allowing common RIA developers to simply create applications that can be deployed to these television connected devices. The dream of write-once-publish-anywhere just got extended to another class of devices. Mind you, these will be high-end devices at first (for example, take a look at Samsung’s TV lineup (filter by Samsung Apps in the features section) to get an idea of what you will be targeting.
As said earlier, in order to build an AIR for TV application, you will the AIR 2.5 SDK. You can get the SDK as a free download from the Adobe website, or you can download the preview version of Adobe Flash Builder (Burrito) from Adobe Labs which includes the proper SDK. If you downloaded the SDK, here is a screencast that shows you how to install it.
Creating your first app :
1. Start a new “Desktop” Flex project by Right-Clicking in the project area, and selecting New -> Flex Project. Select Desktop as your Application Type. You can leave the server settings as their default.
2. Once the project is finished being created, open up the MXML document. Replace the <s:WindowedApplication> with the <s:Application> tag (don’t forget the closing tag at the end of the document!). AIR for TV applications, like Android applications do not support Windowed Applications (by the way, you cannot open new windows).
3. Open the XML descriptor file. Make sure you are using the AIR 2.5 descriptor by checking that the following is on line two of the XML document : <application xmlns=”http://ns.adobe.com/air/application/2.5“>
4. Make sure the tag contains a unique string for your application. It is recommended that you use a domain name that you own backwards, with your application name. For example, I would use org.cotbbs.TVApplication (my domain is cotbbs.org).
5. Update the versionNumber tag to something that represents your current application version. AIR for TV does not yet support versions and updating, but it will in its final release. AIR typically only allows newer version numbers to replace older versions.
6. Within the <initalWindow> node, set the <visibile> and <fullScreen> tags to true. The tag will allow your app to always scale up to your television’s full resolution. The <visible> tag will force your inital stage (your MXML document) to be rendered. Optionally, if you know the size of the screen you are deploying to (for example, 1080p), you can set the width and height here as well.
7. Set your application profile (<supportedProfiles>) to tv. Setting the application profile will disable some of the features of the framework at the compiler level that you wouldn’t have access to (for example, creating new nativeWindows, or a GPS). Additionally, it will cause the AIR debugger to run in a television emulator.
8. Do not set the icons using the descriptor file like you would for a desktop or mobile application. You WILL want to create two PNGs that represent icons, however. Create a PNG named tvIconNormal.png with a size of 137×130 to represent the deselected icon, and a PNG named tvIconSelected.png with a size of 192×192 to represent the selected version of the same icon. Selected means that the user is ‘hovering’ over the icon in application launcher. Store these icons in the /src/ folder of your project (no deviations of this location!).
9. Create your app! You can mix ActionScript, MXML, components, SWC files, and pretty much anything else you want. I won’t cover optimized content for TV in this intro, but that information will be coming forth as people learn more about these devices.
10. Debug your app by clicking on the “Debug” run mode of Flash Builder. You will launch a copy of your app, full screen, but if you hit the [ESC] key on your keyboard, you will get menu options that allow you to simulate common remote buttons, like the MENU, GUIDE, INFO, buttons.
Deploying your application :
Unless you were lucky enough to attend Adobe MAX (and got into one of the Adobe TV Hands-On Labs), you most likely don’t have a device you can deploy your apps to yet. Sorry! If you do have one of these devices, to deploy, simply do an Export Release build within Flash Builder, sign the app with whichever certificate you have (AIR for TV ignores certificates at this time, so technically you can export an unsigned, intermediate AIR file). Copy the .AIR file to a USB drive and use your HDK’s install application to install it.
For everybody else, you will most likely need to upload your app to each manufacture’s App Store. For example, Samsung already has a method where you can upload your finished AIR file to their App store similar to the Android Market. Once uploaded to the app store, your application should show up for consumers to download. I would assume that you can also deploy the app via a USB drive, but that has yet to be seen when these TVs arrive in stores for consumers.
Some Quick Notes :
- Remember that your users most likely will NOT have keyboard. In fact, there is no real way to predict what type of keys they will have on their remote. Most likely, they will have directional keys (Up, Down, Left, Right), a Select/Enter button, a Menu button, and and Exit button. The Exit button is reserved to exit the app and most likely will NOT be available to you. Also, there is no mouse and no multi-touch. Yup. No click events.
- Watch out for what is called as the “Title Safe Area”. Draw a box that is 7.5% inset of the border of your application. This area may NOT be visible to the end user (but often is), and should not display anything that the user needs to interact with, or needs to know. This is a remnants of older or cheaper televisions that cover up the edge of the screen. Think of it as a bleed area in a magazine.
- Do research on the new WebStageView component. It helps with hardware rendering of video. Video displayed in this component won’t show up in the DisplayList (so you can’t interact with it), but it will display to the end user.
Have fun with your App! If you want to see a sample of what I’m talking about, you can download my FXP and final AIR app here. This sample app simply shows the user which button they hit on the remote. It’s not fancy, but it does serve as a great “Hello World” app!