About data binding (Flash Professional only)

Data binding is way of connecting components to each other. Components can be viewed as simple black boxes that have properties. A property is what lets you get data into and out of a component. A binding is a statement that says "When property X of component A changes, copy the new value to property Y of component B." You do data binding within the authoring tool using the Bindings tab of the Component Inspector panel. From here you can add, view, and remove bindings for a component.

Although data binding works with any component, its main purpose is to connect UI components to external data sources such as web services and XML documents. These external data sources are available as components with properties, which you can bind to other component properties. The Component Inspector panel is the main tool that is used within Flash MX Professional 2004 for data binding. It contains a Schema tab for defining the schema for a component and a Bindings tab for creating bindings between component properties.

Caution: If you copy and paste components, their bindings will be lost. You will need to reset the bindings manually. This is also the case if you select several components and convert them into a symbol.

The following example demonstrates how to create basic data binding by connecting one UI component to another.

To connect UI components to create data binding:

  1. Add a NumericStepper component to your application and name it A.
  2. Add another NumericStepper component and name it B.
  3. With A selected, open the Component Inspector panel and click the Bindings tab.
  4. Click the Add Binding (+) button to add a binding.
  5. In the Add Binding dialog box, select Value, and click OK.
  6. In the Name/Value section at the bottom of the Bindings tab, click the Bound To item under Name, and click the magnifying glass icon across from the Bound To item under Value.
  7. In the Bound To dialog box, under Component Path select component B, and click OK.
  8. Select Control > Test Movie. Click the Up and Down buttons on component A.

    Each time you click the buttons on A, the value property of A is copied to the value property of B. Each time you click the buttons on B, the value property of B is copied to the value property of A.

  9. Return to editing the application.
  10. Create another NumericStepper component and name it C.
  11. .Create a Text Input component called D.
  12. Repeat steps 4-7 and bind the value property of C to the text property of D.
  13. Select Control > Test Movie. Type a number in the text input field, and then press Tab.

    Each time you enter a new value, the text property of D is copied to the value property of C. When you click the Up and Down buttons on C, the value property of C is copied to the text property of D.

Note: Data binding is supported only between components that exist in Frame 1 of the main Timeline, Frame 1 of a movie clip, or Frame 1 of a screen.

For a tutorial that introduces Flash data architecture, see www.macromedia.com/go/data_integration.