Creating Behaviors

Behaviors, as discussed in Chapter 8, "Welcome to ActionScript 2.0," are small blocks of code that can be adjusted to fit individual needs. Some of the behaviors that come with Flash can be used to control movie clips, screens (Flash PRO only), and to open new web pages. Those are okay, but for more intermediate to advanced developers, you will want more. Building behaviors is a simple process provided that you familiarized yourself with the XML-to-UI API. Table 27.3 shows a few other tags for behaviors that you should make yourself aware of.

Table 27.3. XML Tags for Behaviors

Tag	Description	Attributes	Child Tags
<flash_behavior>	Tells Flash that this XML is for a behavior	version	N/A
<behavior_definition>	Defines certain aspects of the behavior	dialogID category name class	N/A
<properties>	Holds the declared properties <property>	N/A	<property>
<property>	Declares a property of the behavior	id default	N/A
<actionscript>	Holds the ActionScript being placed	N/A	N/A

Now that you have seen the new tags for behaviors, you can go ahead and create them.

In the following example, you will create a behavior to color components:

1.	Open up your favorite text editor.
2.	Save the file to the C:\Program Files\Macromedia\Flash 8\en\First Run\Behaviors directory as componentColor.xml.
3.	Place this code in; then we can go over each part: [View full width] <?xml version="1.0"?> <flash_behavior version="1.0"> <behavior_definition dialog category="Flash Unleashed" name ="Style a component" > <properties> <property default=""/> <property default="#000000"/> </properties> <dialog title="Style a component" buttons="accept, cancel"> <vbox> <hbox> <label value="Select a component:" control="TARGET" required="true"/> <targetlist /> </hbox> <seperator/> <hbox> <label value="Select a color:" control="COLOR" required="true"/> <colorchip color="#000000"/> </hbox> </vbox> </dialog> <actionscript> <![CDATA[ // Color a component // Flash Unleashed var htmlColor:String = "$COLOR$"; $TARGET$.setStyle("themeColor", "0x"+htmlColor.slice(1)); //end component color ]]> </actionscript> </behavior_definition> </flash_behavior>

This code does a lot of things, so let's break it apart and talk about each piece.

The first piece declares that it is an XML document, and then that it is a Flash behavior.

 <?xml version="1.0"?>        <flash_behavior version="1.0"> 

The next section sets some of the behavior's attributes and declares a couple of properties.

[View full width]
 <behavior_definition dialog category="Flash Unleashed" name ="Style a  component" > <properties>     <property  default=""/>     <property  default="#000000"/> </properties> 

After that comes the dialog box construction with all of the elements.

 <dialog  title="Style a component" buttons="accept, cancel">   <vbox>       <hbox>           <label value="Select a component:" control="TARGET" required="true"/>           <targetlist />       </hbox>       <separator/>       <hbox>           <label value="Select a color:" control="COLOR" required="true"/>           <colorchip  color="#000000"/>       </hbox>   </vbox> </dialog> 

Then the ActionScript is created. Following are some things to know about sending ActionScript out of the behavior: In addition to the fact that it must be between <actionscript> tags, it must also follow <![CDATA[ and end with ]]>. Getting information from the UI elements in the dialog box is as easy as wrapping the id attribute of that element in dollar signs ($id$).

 <actionscript>     <![CDATA[     // Color a component     //Flash Unleashed     var htmlColor:String = "$COLOR$";     $TARGET$.setStyle("themeColor", "0x"+htmlColor.slice(1));     //end of code     ]]> </actionscript> 

And finally, the other open tags are closed as well.

 </behavior_definition> </flash_behavior> 

Now that you understand the fundamentals behind the behavior we just built, let's use it.

1.	Make sure the componentColor.xml document is in the behaviors directory of the Flash 8 directory.
2.	Restart Flash.
3.	Create a new Flash document.
4.	Drag the Button component onto the stage.
5.	Create another layer called actions.
6.	Select the first frame of the Actions layer, and open the Behaviors panel by choosing Window, Behaviors.
7.	Click the Add Behavior button and choose Flash Unleashed, Style a Component, which will pop up the dialog box shown in Figure 27.9. Figure 27.9. The User Interface for your first custom behavior.
8.	Choose the Button component that was placed on the stage, and because it wasn't given an instance name, another dialog box will pop up that is built in to the targetlist UI element, as you can see in Figure 27.10. Give the Button component the instance name of myButton_butn and choose your favorite color. Figure 27.10. The Instance Name dialog box.
9.	Now test the movie, and you will see that the button has taken on the color characteristics of the color you have chosen (sometimes it's hard to see until the button is actually clicked).

That was how to make a behavior. To see more about behaviors, look at the ones that come with Flash. Because they are made in XML, they are open source, so learn from their creators.

Behaviors can save you development time, and so does the topic of the next sectionpanels.