Creating and publishing shareable applications



Distribution Service extension for Flash CS4 enables users of Flash CS3 or Flash CS4 to create and publish shareable applications. The following steps outline the general workflow for creating shareable applications using Flash Professional.

    Workflow for creating and publishing shareable applications

    To create and publish shareable applications with Adobe Flash, follow the following general steps:

    1. Create a shareable application from a template. See Create a shareable application from a template.

    2. Select the Share menu component on the Stage, then open the Share panel to configure it.

    3. Customize the Share menu theme using the options in the Color, Layout, Destinations, and Advanced tabs of the Share menu panel.

    4. Set up the application configuration by filling in the forms for Basic Config. You can further customize the Share menu by entering data for Optional Config using the Sharing, Mobile, FlashVars, URL Parameters and Advanced tabs.

      The following fields are mandatory:

      • Partner ID - The Partner ID you want to associate with this application.

      • Code ID - The identifier or name you'd like to give this application for tracking analytics.

      • Config ID (optional) - The name you'd like to identify a particular configuration or variant of this application when programming content with FlashVars.

      • Script Version - The ActionScript Version used in your project.

      • Title - The name that end users will see when sharing your application.

      • SWF URL - The URL that points to the location where your SWF will be hosted on the Internet.

      • Preview Image URL - A URL to an image file that shows a preview of your application. This is used to display a reference to your application in certain social networks.

    5. On the Embed Code tab, the Share panel automatically generates an HTML embed code that you can paste into a web page where you want to place your application. You can edit this generated embed code directly; any edits are saved within the selected instance of the Share menu component.

    6. Upload your HTML document and SWF file to the server.

    Create a shareable application from a template

    You can use a template to build an application from scratch that incorporates sharing features. When visitors click a button on the shareable application, a Share menu is displayed over the shareable application.

    1. Select File > New.

    2. In the New From Template dialog box, select the Templates tab.

    3. Select an application type from the Category menu: Apps-Custom, Apps-Standard, Apps-Mobile.

    4. Select a template from the Templates menu.

    5. Click OK.

    6. Select the Share menu component on the stage.

    7. To open the Share panel, select Window > Other Panels > Share.

    8. Set up the application configuration by filling in the forms for Basic Config. You can further customize the Share menu by entering data for Optional Config using the Sharing, Mobile, FlashVars, URL Parameters and Advanced tabs.

      The following fields are mandatory:

      • Partner ID - The Partner ID you want to associate with this application. For information about finding your Partner ID, see About Partner IDs.

      • Code ID - The identifier or name you'd like to give this application for tracking analytics (for example, myWeatherApp).

      • Config ID (optional) - The name you'd like to identify a particular configuration or variant of this application when programming content with FlashVars.

      • Script Version - The ActionScript Version used in your project.

      • Title - The name that end users will see when sharing your application.

      • Copyright - Information about your application’s copyright holder.

      • Description - A brief description of your application.

      • SWF URL - The URL that points to the location where your SWF will be hosted on the Internet.

      • Preview Image URL - A URL to an image file that shows a preview of your application. This is used to display a reference to your application in certain social networks.

    9. Select the button and specify its position and size with the Properties panel (Window > Properties).

    10. Finish building the shareable application.

      Note: When building the shareable application, make sure tags for any visual components are placed before the Share menu code.

    Add a Share Menu to an existing application

    You can add a Share menu component to an existing FLA or SWF file.

    1. Open the Components panel, if it is not already open. Select Window > Components.

    2. If the Share section of the Components panel is not expanded, click the “+” next to Share to expand it.

    3. Drag Share Menu from the Components panel, and drop it onto the stage.

    4. Open the Share panel, if it is not already open. Select Window > Other Panels > Share.

    5. Set up the application configuration by filling in the fields for Basic Config. You can further customize the Share menu by entering data for Optional Config using the Sharing, Mobile, FlashVars, URL Parameters, and Advanced tabs.

      The following fields are mandatory:

      • Partner ID - The Partner ID you want to associate with this application. For information about finding your Partner ID, see About Partner IDs.

      • Code ID - The identifier or name you'd like to give this application for tracking analytics (for example, myWeatherApp).

      • Config ID (optional) - The name you'd like to identify a particular configuration or variant of this application when programming content with Flash Vars.

      • Script Version - The ActionScript Version used in your project.

      • Title - The name that end users will see when sharing your application.

      • SWF URL - The URL that points to the location where your SWF will be hosted on the Internet.

      • Preview Image URL - A URL to an image file that shows a preview of your application. This is used to display a reference to your application in certain social networks.

    Edit an existing shareable application

    You can edit an existing shareable application’s FLA or SWF file.

    1. In Flash Professional, open an existing application.

    2. Open the Share panel, if it is not already open. Select Window > Other Panels > Share.

    3. Customize the Share menu theme using the options in the Color, Layout, Destinations, and Advanced tabs of the Share menu panel.

    4. Set up the application configuration by filling in the forms for Basic Config. You can further customize the Share menu by entering data for Optional Config using the Sharing, Mobile, Flash Vars, URL Parameters and Advanced tabs.

      The following fields are mandatory:

      • Partner ID - The Partner ID you want to associate with this application.

      • Code ID - The identifier or name you'd like to give this application for tracking analytics.

      • Config ID (optional) - The name you'd like to identify a particular configuration or variant of this application when programming content with Flash Vars.

      • Script Version - The ActionScript Version used in your project.

      • Title - The name that end users will see when sharing your application.

      • SWF URL - The URL that points to the location where your SWF will be hosted on the Internet.

      • Preview Image URL - A URL to an image file that shows a preview of your application. This is used to display a reference to your application in certain social networks.

    Program a button to open the Share Menu

    Add a button to the stage. Then, put an event on the button that will open the Share Menu.
    Note: If you create a Share menu from a template this procedure is unnecessary.

    This is an example for ActionScript 3:

    my_ShareMenu.hide(); 
share_btn.addEventListener(MouseEvent.CLICK, myShareHandler); 
function myShareHandler(evt){ 
    my_ShareMenu.show(); 
}

    This is an example for ActionScript 2:

    my_ShareMenu.hide(); 
share_btn.onPress = function() 
{ 
my_ShareMenu.show(); 
}

    Customizing a Share Menu theme

    What is a theme?

    Included in the Share menu panel are pre-populated themes. Each theme contains saved configurations of Share menu components. You can modify, import, and export saved themes to or from XML files rather than re-using the Share menu config panel every time you build an application. Each theme contains pre-defined settings for a style of shareable application. Not included in a theme are the application settings, such as dimensions, and IDs.

    Import and export a theme

    You can create new themes by changing settings in the panel, and saving your changes. New themes will be added to the list of themes for future use. Themes can also be exported for use in Distribution Service extension for Dreamweaver CS4, Distribution Service extension for Flex Builder 3 or Distribution Manager. To import a theme:

    1. Select Window > Other Panels > Share.

    2. In the share panel, click the Layout tab.

    3. Select a theme.

    If you customize a theme and want to store the customizations for use in future shareable applications:

    1. click Export to save the theme for future use.

    2. In the Save In field, browse to a location to save your theme.

    3. Type a filename in the File Name field.

    4. Click Save.

    Share menu colors

    You can further customize the color scheme of the Share menu by clicking the Color panel of the Customize Theme view, and then selecting colors for many of the Share menu’s design characteristics.

    Share menu layout

    To change the layout of the Share menu, click the Layout panel, and choose among a variety of layout presets, or specify your own. You can also import existing layouts in this panel.

    Destinations and advanced tracking

    In the Destinations panel, you specify the social networks to which your application will be shared. You also specify bookmarking sites. If you select the Enable Advanced Tracking option, your shareable application can take advantage of sophisticated tracking services. See Using the Distribution Service API for Flash and Flex shareable applications for information about reporting on advanced metrics.

    Advanced theme options

    The advanced theme options fall into the basic categories of: Display, Background, Social Network Buttons, Textboxes, Buttons, Listboxes, Checkboxes, Service Marker, Tooltips, Privacy Text, Headers, Messages and Links. For each of these, fonts, colors, sizes, borders, gradients, etc., can be modified.

    Customize a Share Menu theme

    1. Place a Share menu on the stage.
    2. If it is not already open, open the Share panel.
    3. In the Share panel, do any of the following:

      • To change the color of the Share Menu, click the Color tab, and select a color preset.

      • To change the layout of the Share Menu, click the Layout tab. Select a layout, and check the box next to each of the options in the Layout Options menu you want to enable.

      • To change the available social networks and bookmarking networks, click the Destinations tab. Check the box next to each of the options in the Social Networking menu and Bookmarking menu you want to enable

      • To change additional options, click the Advanced tab. Check the box next to each option desired from the menu.

    4. Fill out the fields in each of the four tabs (Edit Theme, Basic Config, Optional Config and Embed Code). Red asterisks indicate required fields.

    Shareable application configuration

    You use the Share panel to set your shareable application’s basic and optional configurations. See Share menu options for information about each field.

    Email, Bookmarks and Desktop sharing

    Within the Share panel, you can select Optional Config and then Sharing to set specific values to control how your application will be shared using Email, Bookmarking services and Desktop environments.

    The specific config options are: Email Subject, Email Body, Bookmark URL, Desktop Icon URL, and Copyright. For more information, see Share menu options.

    Enabling an application to be shared with mobile devices

    To share your application with mobile devices, you must configure the Share menu for the web version of your application. This involves the following two steps, both of which are required:

    1. Enable the Mobile tab on the Share menu.

      Within the Share panel, select Edit Theme and then Layout. On the right side of the Share panel, check the box next to Show Mobile (Beta) to configure the Share menu to display an option to end users that allows them to share your application to their mobile device. Notice that after checking this box, the preview is updated to display a new option, Mobile, on top of the Share menu.

    2. Configure the locations where your application can be found from the Share menu.

      Within the Share panel, select Optional Config and then Mobile to set the URLs that point to the various mobile versions of your application. For platforms where users locate and download applications from an applications store (for example, Apple IPhone), set the URL field to the location that refers to your application in the store. For Windows Mobile and Symbian platforms, set a URL that points to the specific .CAB file (for Windows Mobile) or .SIS file (for Symbian) where your mobile applications will be hosted on the internet.

    Note: If you enable the Mobile tab on the Share menu but do not configure the locations where the Share menu can find your application, the Distribution service displays the message: No Mobile content.

    Set the Other field to a URL that the mobile device will be redirected to if the Distribution service determines that user’s mobile phone is not one of the types listed above. Use this URL to display a web version of your application, perform further handset detection on your own, or simply display a web page that says there is no appropriate version of the application for the mobile device.

    Using FlashVars to program content

    You can use FlashVars to alter the content and behavior of your shareable application at runtime. See Using Dynamic Variables with Applications for information.

    Using URL Parameters

    URL parameters provide another method of displaying different content using the same basic shareable application. See Share menu options for information.

    Advanced Share menu parameters

    From the Optional Config tab, click the button labeled Advanced. The menu here allows you to add advanced parameters to the Share menu. Use this drop down menu to add any additional Share Menu parameters such as entering a custom SWF URL for a specific social network. See http://www.adobe.com/go/fps_distribution_flash_adv_params_help for more information including a description of each of the advanced parameters.

    HTML Embed code

    The last step of the Share panel is the creation of the Embed code for the shareable application. The embed code that is generated can be placed in any HTML page. The HTML code displays the shareable application and makes it trackable by the ad network.

    1. Select an application.

    2. Select the Share component of the application on the stage.

    3. Click on the Embed Code tab at the top of the application. It becomes enabled as soon as you fill out the mandatory fields (Partner ID, Code ID, Title, SWF URL, Preview Image URL) on the Basic Config Tab. The panel walks you through a wizard.

    4. Specify the options in each step and click Next to proceed to the next step, or Previous to go back.

    5. Copy the HTML embed code and paste it into a web page. You can also edit the HTML embed code directly. Any edits you make are saved in the instance of the Share menu component.

    Using FlashVars to modify content programming

    You can use FlashVars to alter the content that your shareable application displays at runtime. See Using Dynamic Variables with Applications for more information.

    Share menu options

    Basic Config

    Partner ID
    identifies the account used for tracking all of your shareable applications. You can obtain a Partner ID with Distribution Manager. Your Partner ID is visible in the lower right corner of Distribution Manager. Alternatively, you can find your Partner ID in your account information on the Gigya website.

    Code ID
    Used to identify a particular shareable application along with an optional Config ID. In certain cases where you use FlashVars to program one shareable application to show different content you can use the Config ID to identify the variants of a particular shareable application. Code ID and Config ID can have up to 49 alphanumeric characters, including whitespace. Trailing spaces will not be included. No special characters are allowed. See Using Dynamic Variables with Applications for information.

    Config ID
    (Optional) The name you use to identify a particular configuration or variant of this of this application when programming content with FlashVars.

    Script Version
    The ActionScript version that you have used for your application.

    Title
    The name given the shareable application, typically by the developer of the application.

    SWF URL
    The URL of the location where your SWF file will be hosted on the Internet.

    Preview Image URL
    The URL of the location of an image file that shows a preview of your application. This is used to display a reference to your application in certain social networks.

    Description
    A brief description of the shareable application.

    Optional Config: Sharing tab

    Email Subject
    You can customize the e-mail that is sent when your application is shared via an e-mail. If you include the replacement text "$sender$" in the subject it will be replaced with the name entered by the sender.

    Email Body
    You can customize the e-mail that is sent when your application is shared via an e-mail. If you include the replacement text $sender$ in the body it will be replaced with the name entered by the sender. Also, f you include the replacement text $URL$ in the body it will be replaced by the actual URL of the shareable application.

    Bookmark URL
    By default, the URL to the page containing your shareable application will be used for bookmark services. It can be overridden to use a different URL by setting a value in the Bookmark URL field.

    Desktop Icon URL
    used to retrieve and display an icon in desktop application environments.

    Copyright
    The date the shareable application was copyrighted.

    Optional Config: Mobile tab

    Windows Mobile
    allows you to specify a destination for a mobile device that uses the Windows Mobile platform.

    Symbian
    allows you to specify a destination for a mobile device that uses the Symbian S60 mobile platform.

    Other
    allows you to specify a destination for a mobile device that uses a mobile platform other than Windows Mobile or Symbian.

    Optional Config: Flash Vars tab

    Flash Vars
    can be entered into your embed code here which allow you to control the programming of your shareable application by modifying the values. Your SWF must have been developed to take advantage of specific Flash vars by name or they will have no effect. A typical use of Flash vars is to program a templated shareable application into a number of different applications simply by varying the Flash vars to adjust the content. See Using Dynamic Variables with Applications for a tutorial that shows how to use FlashVars in a shareable application.

    FlashVars are variables that can be passed from a web page to a SWF file (in this case a shareable application). You can define any variables you like in the HTML code of a page and these variables can be used by the shareable application.

    You pass values to a shareable application from the HTML code as the shareable application loads using the FlashVars parameter/attribute of the <object> and <embed> tags. There are many reasons for doing this. For example, you can reuse the same basic application on different pages, but alter certain aspects using variables.

    FlashVars can be entered into your embed code using the Distribution Service extension, or you can add them to your SWF file’s ActionScript manually. Every shared application has a Code ID that is used to uniquely identify it, along with an optional Config ID. In cases where you use FlashVars to program one shareable application to show different content, you can use the Config ID to identify the variants of a particular shareable application.

    Using FlashVars to change a shareable application’s content at runtime means that you can use a single application as a template to format other similar content. For example, you can design a shareable application that contains categories of content (title, description, video, contact information, for example), but that does not contain the actual content. Up to 16 different versions of the content can be passed in at runtime using FlashVars. You don’t have to redesign and recompile separate SWF files to achieve this result.
    Note: this use of the word “template” to describe using a single shareable application as a template for multiple application versions (using FlashVars) is different from the use of the word “template” in the Flash Professional authoring tool. In the authoring tool, a template is a predesigned structure that you can use when you are initially creating a shareable application’s SWF file.

    Optional Config: URL Parameters tab

    URL Parameters
    can be entered here to control the URL of your shareable application. When you add a URL parameter, the URL to appended with a name/value pair in the following format: "http://some-url.com?parameter-name=parameter-value". Typically this is used for retrieving language specific versions of your shareable application, for example: "http://some-url.com?language=en-US".

    Optional Config: Advanced Parameters

    Advanced Parameters
    The menu here allows you to add advanced parameters to the Share menu. Use this drop down menu to add any additional Share Menu parameters such as entering a custom SWF URL for a specific social network. Click Help for more information including a description of each of the advanced parameters.

    See http://www.adobe.com/go/fps_distribution_flash_adv_params_help for more information including a description of each of the advanced parameters.

    Embed Code

    The embed code is a generated HTML snippet that, when placed in an HTML page, displays your application and a Share menu that is configured with your application’s details, which enables users to share it. Paste the generated HTML code snippet between the <body> tags in the web page in which you want to place the shareable application.

    Generate revenue with a Share Menu

    In addition to making applications shareable, you can generate revenue from your shareable applications by participating in the Distribution service as a publisher. Applications from top-tier brand advertisers could be cross-promoted with your shareable application. Advertisers would pay you based on how many times their application is installed. A Share menu does not displace any current advertising real estate on your page so all revenues earned are incremental.

    For more information about joining the ad network, click Account in Distribution Manager.