QueTwo's Blog

thouoghts on telecommunications, programming, education and technology

Creating your first Application for TV

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!


18 responses to “Creating your first Application for TV

  1. Pingback: Tweets that mention Creating your first Application for TV « -- Topsy.com

  2. Adam November 4, 2010 at 8:59 am

    Your tags have been stripped in point 6.

  3. Renaun Erickson November 4, 2010 at 11:52 am

    Great post, looking forward to see how the AIR for TV plays out.

  4. Ryan Stewart November 13, 2010 at 4:05 pm

    Awesome post Nick, thanks for putting this info up.

    Glad we got to touch base at MAX!


  5. Pingback: AIR pour TV – Le premier tutorial pour créer une application AIR pour TV - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3

  6. john November 21, 2010 at 5:22 am

    the fiels links are missing

    How do i listen to remote control events?

    • quetwo November 27, 2010 at 10:49 pm

      Remote Control events are seen a KeyboardEvent. If you take a look at the Keyboard class within Flex/Flash, you will see all the buttons they recently added for a remote control like the MENU, BACK, etc.

  7. john November 21, 2010 at 5:24 am

    hi. congrat, your’e the first post on the web about this subject!
    What to listen to for remote control events?

    You demo files links are missing.

    • quetwo November 27, 2010 at 10:50 pm

      I fixed the links to the project files. It turns out that my host decided to change the mime-type handler for .AIR and .FXP files so that they wouldn’t download. I’ve tested them, and they are working now. Thanks for letting me know.

  8. Brent November 29, 2010 at 1:55 pm

    Thanks for the great post. Have you tried doing any sort of overlay tests where the background of the application is transparent?

  9. fajar January 18, 2011 at 12:01 am

    Thanks for sharing this. I’m wondering what device was used to deploy the application? was it a samsung TV?

    • quetwo January 18, 2011 at 7:55 am

      I am using the AIR for TV Hardware Developer Kit, which was available for certain attendees at Adobe’s MAX conference. It is essentially reference hardware for most of the televisions that are coming out.

      The same workflow will work on Samsung televisions that support AIR, and others when they release App-capable televisions that support AIR.

  10. amarshukla July 6, 2011 at 2:05 am

    Hi quetwo,

    I am not able to get a way to use AIR sdk 2.5 with FlashBuilder 4.5. One more doubt, does only 2.5 AIR sdk supports tv app development or newer versions also like 2.7 is the latest AIR sdk.

    • quetwo August 21, 2011 at 6:47 pm

      Unfortunatly, you will have to drop down to Flash Builder 4.0, or build the AIR for TV projects by hand. If you check out the AIR 3.0 betas that have been posted on Adobe Labs there is a lot of documentation on TVs. They haven’t posted any additional code for the AIR for TV Reference Hardware that they gave us at MAX, so I have no idea as to what is working with that. I know they did say they are skipping AIR 2.6, 2.7 for AIR for TV at this time…

  11. psubbareddy September 29, 2011 at 8:45 am

    Hi quetwo,,

    How can i run this .AIR file on Samsung Tv emulator. Pl guide me. thanks in advance…..


    • quetwo September 29, 2011 at 8:10 pm

      The TV needs to have the AIR runtime pre-installed. Only certain models of Samsung 2011 televisions have this available. I don’t know if the Samung TV Emulator has support for AIR (I think it only does the native Samsung apps).

  12. amar September 29, 2011 at 11:40 pm

    You can’t run .AIR file directly on Samsung Tv Emulator. You need to extract this .AIR file with 7zip or win zip as its just like a zip package then you can deploy your air app along with some samsung configuration xml file, on Emulator.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: