Building Video Apps With Adobe AIR

Next you’ll select the skin for the FLVPlayback component.
7. With the FLVPlayback component selected on the stage, select the Window >Components Inspector menu command. The Component Inspector panel opens with the Parameters tab selected.
8. Click "skin" in the list of parameter names, and click the browse icon that appears in the associated item in the value column to the right. The Select Skin dialog box opens.
9. In the Skin dropdown list, select SkinOverPlay.swf. If you were building your own application, you could customize the skin at this point for a branded experience in the application.
10. Click OK to save your skin selection and return to the Component Inspector panel.

Now you’ll tell the application which file to play in the video component when you launch the application.
11. With the Parameters tab still selected, click "source" in the list of parameter names.
12. Click the browse icon in the associated item in the value column to the right to open the Content Path window.
13. Browse to and select the FLV file you downloaded earlier to your desktop.
14. Select the Match source FLV dimensions checkbox to ensure that the video player displays the FLV file using its original dimensions.
15. Click OK.
16. Save your application using the File > Save menu command.
17. Select Control > Test to test out your application. A windowed application with the application title "AIRFlashVideo" launches with the selected video playing. Note that it may take a moment for your video to begin playing.

You now have used Adobe Flash to create your first video-enabled application built on AIR.

Now let’s use Adobe Flex to create a slightly more intricate application built on Adobe AIR. Although the emphasis is on "slightly," this modest application showcases how an application built on AIR is a true desktop application because you can drag an FLV file from the desktop onto the application window and play the video—something you can’t do with a web-based application.

Creating a Video-Enabled Application Using Adobe Flex and Adobe AIRTo create this next application, you need to have Adobe Flex Beta 3 installed, and you need the same FLV file you used in the earlier example. To build an application in Flex, you’ll need to create two separate files: an MXML file, which declaratively defines the application user interface elements, or "chrome," in an XML-based language, and an ActionScript file (XML file) that defines client logic and procedural control. You write both MXML and ActionScript source code using the Flex Builder IDE, and then you compile it with the Flex compiler to produce a binary file with an SWF extension. Note that the following code is for AIR beta 2.1. Click the Flex Builder 3 icon to launch the application.2. Select File > New > AIR Project. The Create New AIR Project set-up screen opens.3. In the Project Name text box, enter DragDropVideo and click Next.4. Leave the default settings and click Finish. Flex Builder creates a new project that includes an MXML file, which contains the application logic, and an XML file, which describes the windows chrome.5. In the Navigator on the left side, select DragDropVideo.xml. Copy and paste the code available at www.helpexamples.com/flash/video into the Source view to the right to define the appearance of your application, including windows chrome.6. Next, select DragDropVideo-app.mxml. In the Source view on the right, copy and paste the code available at www.helpexamples.com/flash/video to define the logic behind your application. 7. Select Project > Export AIR Package. The Adobe AIR Package Contents screen opens. 8. Change the Save as location to your desktop, and leave all other settings in their default state. 9. Click Finish.Installing and Launching Your Application Built on Adobe AIR Now it’s time to install, launch, and actually use the application. 1. Navigate to the DragDropVideo.air file on your desktop and double-click it to launch the application Installer (see Figure 5). 2. Follow the Installation instructions, selecting the Start application after installation checkbox in the second installation screen (see Figure 6). 3. You’ll see the application window open, with the application title DragDropVideo.4. Drag and drop the FLV file from your desktop onto the application window. The video begins playing. Looking Ahead at Developing RIAs and Applications Built on Adobe AIR This article provided a quick tour of Adobe AIR and some of the new tools developers have for packaging web-based applications for the desktop. It also offers a glimpse into the advantages of better integrating video and desktop applications to reach audiences with more engaging, relevant content. It is likely that many applications built on Adobe AIR will be developed alongside web-based applications, letting developers extend the reach of their applications to the desktop and giving users rich application experiences—online or offline. Regardless of the approach, the ability to more easily and reliably integrate video into applications opens the door to new revenue paths for businesses, to stronger customer relationships, and to better user experiences.