« HELP CENTER

Ad API 3

Code Examples

We currently have two code examples available to get you started creating components with Ad API 3:

  • Base Component: This bare-bones example demonstrates how to set up a component class and build a very basic component.
  • List Component: This is the actual code for Flite’s built-in List Component.

Base Component

This very simple component code example creates a component that draws a rectangle of the specified color and transparency. The component code is thoroughly commented and demonstrates best practices in creating a component class, and using component interface methods.

Click here to download the Base Component from our GitHub repository.

If you are just starting out, this is a great example to get you up and running, and to understand the mechanics of creating a Flite Hub component, from creating an AS3 component class, to uploading your SWF file into Component Studio and creating parameters. If you are new to component building, we recommend you follow the steps below. Refer to the Component Development Guide if you have any questions along the way.

  1. Start with the code in BaseComponent.as. Review it to make sure you understand how it works.
  2. Open Adobe Flash and create a new AS3 Flash document called BaseComponent.fla that uses BaseComponent as its class.
  3. Publish the document to create a BaseComponent.swf file.
  4. In the Flite Console, create a new component using the SWF file you created.
  5. In Component Studio, create a new parameter as described below. This parameter will control the color of your rectangle.
    • Parameter: color_param_name
    • Type: Color Picker
    • Label: Rectangle Color
  6. Create a second new parameter as described below. This parameter will control the transparency of the rectangle from 0 (fully transparent) to 1 (fully opaque).
    • Parameter: alpha_param_name
    • Type: Text Field
    • Label: Rectangle Transparency
    • Help Text: Must be between 0 and 1
  7. Click the Publish button to save your new component.
  8. Go back to the Flite Console and add your new component to the Ad Studio 3 component list using the Resources menu.
  9. Open an ad in Ad Studio 3. Your new component will appear in the component list on the right. 
  10. Add the component to the stage and you will see the “Rectangle Color” and “Rectangle Transparency” settings you created in the Settings section of the Inspector Panel. Adjust these as you wish, and see the changes in the component preview.

If you are able to complete the steps described above, you should have all the tools necessary to build a Flite Hub component.

List Component

This code example includes the complete code for the the built-in List Component that comes standard with your Flite Ad Studio account. The List Component is a navigation component that navigates between its child components using an iPhone-style clickable list interface.

Click here to download the List Component from our GitHub repository.

We chose this component as a code example, because it is fairly simple and easy to understand, and showcases a lot of the functionality that you are likely use in your component implementation. The following are some of the things you can learn by looking at this component's code.

  • Modular approach: We did not follow the MVC (Model-View-Controller) software engineering pattern precisely when creating this component (see Code Architecture guidelines), but we did separate the model (ListConfig class) from the rest of the component code, and take a very modular approach, with multiple classes responsible for different parts of the component.
  • Configuration parameters: This component contains a lot of configuration parameters, and provides a good example for how to organized all those parameters in your code.
  • Children: This is a navigation component, and as such is able to have children. It provides an excellent example of how to access and manage a component's children, including handling child state changes.
  • Metrics: This component tracks a number of different metrics, including scrolls and navigation clicks. It also passes metrics helper objects to its children to be used as triggers.
  • API use: In addition to using the Metrics API, this component uses a number of other Ad API classes, including State, Animation, Theme, and Container. This is a great example of how to use the API in your component development.
  • Handy utility functions: This code includes some handy utility functions for dealing with strings and text fields. We use these functions throughout our code base, and you may find them useful in your component development as well.