Streaming Media - December 2007/January 2008 - (Page 60) go ahead and use Adobe Flash CS3 Professional to create an application built on AIR that includes video. The end result is a desktop application that launches an FLV video in the Flash Player in AIR. You’ll create a Flash project the same way you would create one for the web. At this stage, you should have Flash CS3 Professional, AIR, and the Adobe AIR update for Flash CS3 Professional beta installed. 1. Click the Flash CS3 Professional icon from your programs or application menu to launch the application. The Flash CS3 Welcome Screen opens. 2. Select Flash File (Adobe AIR) from the Create New options on the Welcome Screen (see Figure 1). Click OK to the message box that opens. An untitled Flash project opens. 3. Save to your desktop as AIRFlashVideo.fla using the File > Save As menu command. 4. Select Window > Components to open the Components panel. 5. Scroll down to and expand the Video components list to see all the available video components. 6. Select FLVPlayback and drag and drop it onto the stage. You’ll see a black box with the FLV icon in the center load onto the stage. AIRborne Figure 3. 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. 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 (see Figure 2). 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 (see Figure 3). 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 (see Figure 4). Note that it may take a moment for your video to begin playing. 60 STREAMING MEDIA December 2007/January 2008 Figure 4. Select Control > Test to test out your application. A windowed application with the application title “AIRFlashVideo” launches with the selected video 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 webbased application. Creating a Video-Enabled Application Using Adobe Flex and Adobe AIR To 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
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.