用Flash创建你的第一个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.

在Adobe MAX大会上一个最重要的宣布就是现在可以获得AIR2.5,这是目前为止第一个支持电视机的SDK。如果你们当中的一些人曾经尝试过为机顶盒STB (set-top-box)编写应用或者直接编写电视应用,你可能会觉得很挠头。

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).

通常来说,目前如果你需要发布一个应用到连接电视的设备,(包括DVD 播放器,蓝光播放器,机顶盒,或者是电视机本身),你不得不学习供应商提供的语言,适应供应商提供的JAVA,或者为你的应用支付给供应商。另外,你的应用是很短暂的,应为设备会不断更新,需要重新学习适合新设备的语言(其中三星公司在过去几个月当中就是这样做的)。

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.

凡是加入Adobe OpenScreen项目的厂商,都允许RIA开发者非常简便的创建应用在他们的设备上。一次开发到处运行的梦想将要拓展到其它类型的设备上。正想你所知道的,首先将会有一些高端设备(例如,在Samsung’s TV lineup上关注的)可以让你达到你期望的目标。

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.

正像刚才说的,为了创建一个针对TV的AIR应用,你必须使用AIR 2.5 SDK。你可以获得SDK从ADOBE 网站上free download,你也可以下载Adobe Flash Builder (Burrito) 预览版本preview version,这个版本将会包含所需要的SDK。如果你下载了SDK,这是一个屏幕截图,教你如何安装here is a screencast

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.

1.在项目区域右键开始一个新的“Desktop” FLEX 项目,然后选择 New -> Flex Projec。选择桌面程序作为你的应用类型。你可不必关心服务器设置选项,都是默认好了。

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).

2.一旦项目创建成功,打开MXML 文档。用<s:WindowedApplication>替代<s:Application>标签(不要忘记在结尾处关闭标签)。针对TV 设备的AIR应用,就如Android应用不支持Windowed Applications (顺便说一下,你不能使用打开新窗口方法).

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 : <applicationxmlns=”http://ns.adobe.com/air/application/2.5“>

3.打开XML描述文件。通过检查XML文档中的<applicationxmlns=”http://ns.adobe.com/air/application/2.5“>确保你正在使用AIR 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).

4.确保你的应用标签中包含唯一的字符。建议你使用和你域名相同的名字作为应用名称。例如,我使用org.cotbbs.TVApplication(我的域名是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.

5.更新版本号标签,这样可以表明当前应用程序的版本。针对TV的AIR 目前为止还不支持版本更新,但它在最终会得到支持。AIR通常允许新的版本,取代旧版本。

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.

6.在<initalWindow>节点中,设置<visibile>和<fullScreen>标签为true。该标签将允许你的应用程序自动缩放到你电视的分辨率(其实就是全屏)。该<visible>标签使你的应用程序在初始阶段(你的MXML文件)被渲染。或者,如果你知道你要部署到屏幕上(例如,1080)的大小,可以设置宽度和高度在这里。

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.

7.设置你的应用程序配置文件(<supportedProfiles>)只针对电视。设置应用程序配置文件,禁用编译器的一些特征,这样你不能够访问一些功能(例如,创建新nativeWindows,或GPS)。此外,它会导致AIR调试器在电视上运行模拟器。

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!).

8.不要像桌面和手机应用程序那样,使用描述文件来设置图标。你将要创建两个PNG格式的图标,创建一个名为tvIconNormal.png的137 × 130大小的图标,和一个命名为tvIconSelected.png的192 × 192大小的PNG图标。这是用户选择应用时候看到的图标。存放这些图标在/文件夹src/ folder(不能有偏差!)。

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.

9.创建你的应用程序!你可以混合的ActionScript,MXML中,组件,深港西部通道的文件,几乎任何你想要的。我将不包括在此介绍优化电视内容,但这些信息会涌现出来,因为人们了解这些设备更多。

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!

Advertisements

发表评论

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 / 更改 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d 博主赞过: