The Distribution Service Extension for Flex Builder 3 lets you add a Share component to Flex applications so that they can be shared to a variety of social destinations. The Share component in web applications will always be kept up to date because it is dynamically loaded at run time. Doing so places the Share component in the network security sandbox, which has the side effect of not letting the component load by default in an AIR application, which runs in the application security sandbox. This tutorial will show you how to get around this limitation so that you can have a Share component in an AIR application.

Requirements

To make the most of this article, you need the following software and files:

Distribution Service Extension for Flex Builder 3

• Download

Distribution Service Extension for Flash CS4 Professional

• Download

Flex Builder 3

• Try
• Buy

Flash CS4 Professional

• Try
• Buy

Sample files:

• share_menu_air.zip (ZIP, 688 KB)

Prerequisite knowledge

Basic familiarity with Flash, Flex Builder 3, and HTML is recommended. Readers should be comfortable with using Social Networking sites.

Overview

There are two sections to this tutorial. In the first section, you will create a SWF file containing the Share menu that will eventually be loaded into the AIR application at run time. In the second section, you will set up the AIR application to load the SWF file created in the first section. Figure 1 gives an overview of the process. This tutorial will not go into how to create a shareable web application. For more information on how to do that, you can check out the docs at http://www.adobe.com/devnet/flashplatform/services/distribution/.

Figure 1. Structuring the Share component for loading into an AIR application

Creating the Share Component

The first thing to do is to create a SWF file that contains nothing except for a Share component. This tutorial uses Flash Professional for this process because of the rich customization options that the Share panel offers, but the component could also be created with Flex Builder 3. For a finished version of this FLA file, see fullSizeShare.FLA in the sample files.

1. Launch Flash CS4 Professional and create a new AS3 project by selecting File > New > Flash File (Actionscript 3.0).
2. Set the Stage size to be 350 x 400.
3. If it is not already open, open the Components panel by selecting Window > Components, and then expand the Distribution group.
4. Drag a Share menu component onto the Stage.
5. If it is not already open, open the Share panel by selecting Window > Other panels > Share.
6. In the Edit Theme > Layout tab, set the width and height to be 350 ´ 400 so the Share menu occupies the entire stage. Center the Share Menu component if necessary. Still in the Layout tab, deselect the Show Close option.

7. Click Next. On the Basic Config tab, enter all of the required info. In the SWF URL field, enter a URL to the SWF file of the web version of the Application that will be shared when a user clicks a social destination. For example: http://mydomain/myWebApp.swf

   Note: If you only want to share an AIR app, this field is not important and "Show Post", "Show Email", and "Show Bookmarks" should also be deselected from the layout tab. Then, from Edit Theme > Destinations, you can also deselect "Vista Sidebar" and "Yahoo Widget" so that "Adobe AIR" is the only remaining destination.

8. Click Next. On the Optional Config >Advanced tab, enter the location where the AIR file will be hosted for the adobeairwidgetContent parameter—for example, http://mydomain/myAIRApp.air. It is also recommended that you enter the location to a preview image to appear in the AIR download badge. This can be done be clicking the "+" button next to the first value to create a new row. Then, in the new row, select adobeairwidgetPreviewURL in the pop-up menu and enter the URL to a JPG file.
9. Click Next. Grab the HTML embed code from the Embed code tab and paste it into a new HTML document. If you were creating a Share menu for a web application, this HTML file would have your Web app embedded within it, but since you are creating a Share menu for an AIR app, you need to make a few changes to the HTML file so that it embeds this Share component instead of the web app.
10. Change the <PARAM NAME="movie" VALUE={…}/> tag so that it points to this movie—for example, http://mydomain/fullSizeShare.swf. Do the same thing for the <EMBED src="…" /> tag. For a finished version of the HTML file, see fullSizeShare.HTML in the sample files.
11. Give the share menu an instance name of: share_mc
12. On the main timeline of the FLA file, add a layer above the one containing the share menu, and put the following code on the timeline:
    share_mc.show(); (otherwise the menu will not show up!)

13. Now publish the SWF file and put it up on a web server. Also add the above HTML file to the server.

    Note: Make sure that Flash is not generating its own HTML file, because this one might overwrite the one that you just made! This can be done be selecting File > Publish Settings and deselecting the HTML option.

At this point you should be able to type: http://mydomain/fullSizeShare.html into a browser and it should load myShareMenu.swf. If you click one of the social destinations from this SWF file, it should then share myWebApp.swf, NOT fullSizeShare.swf.

Adding the Share component to an AIR app

Now it's time set up an AIR application that will load in the Share menu that you just created.

1. Launch Flex Builder 3 and create a new Flex Project by selecting File > New > Flex Project. Select Desktop as the application type. Name the project myAIRapp. For a finished version of this AIR file, see myAIRapp.AIR in the sample files.

2. Add an HTML component to the MXML and set the location property to point to: http://mydomain/myShareMenu.html. Set the visibility property to false. You can also set the paintsDefaultBackground property to false and set backgroundAlpha to 0 so that, if there is any HTML background on the sides of the Share component, it will not get rendered.

   For example:

   <mx:HTML backgroundAlpha="0" paintsDefaultBackground="false" 
      id="shareMenu" height="405" width="370" 
      location="http://mydomain/myShareMenu.html" visible="false"/>

3. Use the click event of a button to make the HTML component visible:

   <mx:Button label="Share" id="showShareButton"
       click="{shareMenu.visible=true}" />

4. Add a label and put the whole thing in a VBox. The final code should look something like this:

   <?xml version="1.0" encoding="utf-8"?>
   <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute" height="500" width="420">
      <mx:VBox width="100%" height="100%" horizontalAlign="center">
         <mx:Label text="Demo AIR App with a Share Menu" fontSize="14" fontWeight="bold" />
         <mx:HTML backgroundAlpha="0"  paintsDefaultBackground="false" id="shareMenu"
            height="405" width="370" location="http://mydomain/myShareMenu.html"
            visible="false"/>
         <mx:Button label="Share" id="showShareButton" click="{shareMenu.visible=true}" />
      </mx:VBox>
   </mx:WindowedApplication>

5. Finally, if you put this .AIR file on a web server at http://mydomain/myAIRApp.AIR, you can use the Social destination buttons within the Share menu to Share this AIR app!

Where to go from here

For more information on the Flash and AIR security model see Introducing the Adobe AIR security model .

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author