Using Behaviors - Page 3
       by kirupa  |  28 August 2009

In the previous page, you learned a bit more about what happens when a behavior gets added by looking at the trigger and other related properties. In this page, let's wrap up by adding another behavior.

Adding our Second Behavior
Now that you've gotten your feet wet with adding a behavior and learning a bit more about how they work, let's close out this tutorial by adding another behavior. In my original example, not only did the animation play, but you also heard a sound play along with the animation. So far, we have just added a behavior for making the animation play. Let's go ahead and repeat the magic for making the sound play as well.

Go ahead and bring up your Assets panel if it isn't already displayed, and from the Assets panel, make sure to select the Behaviors category. From the list of behaviors, find the PlaySoundAction:

[ the PlaySoundAction helps you to play sounds ]

Go ahead and select the PlaySoundAction and drag and drop it onto your image directly on the artboard:

[ you can applly a behavior by dragging/dropping it on the artboard as well ]

Once you release your mouse cursor on the image, your PlaySoundAction has now been applied. You can tell by looking at the PlaySoundAction entry that is nested under your image element in the object tree:

[ your object tree displays any behaviors that have been applied ]

In case you are wondering, dragging a behavior and dropping it on the artboard is pretty much identical to dragging a behavior and dropping it on the object tree. Feel free to use whichever approach you feel more comfortable in, for the end result does not depend on how you attached a behavior to an element.

Anyway - regardless of how you apply your behavior, dragging/dropping onto the object tree or dragging/dropping onto the artboard, your Properties Inspector will now display all of the properties for the PlaySoundAction behavior you just dropped:

[ PlaySoundAction's properties are now displayed ]

Everything in the Trigger category is ok to leave with its default values, so let's just leave it alone for now. Under Common Properties, you'll see an area marked Source. It is here where you get to specify which sound file that you want your PlaySoundAction to play when triggered.

For your project, I already imported a sound file for you, so just go ahead and click on the Source drop-down and select the car_arrives.mp3 file that you see:

[ select the car_arrives.mp3 file from your Source menu ]

Once you have selected that sound file for your Source, just hit F5 one last time to play with your project. This time, when you click on your image, not only does the storyboard kick-in with the animation, your sound also plays!

Conclusion
That is all there is to our introductory look at using behaviors. What I showed you on this page covered the majority of cases that you will use behaviors for. Of course, that doesn't mean you have learned all of the tricks yet. In subsequent tutorials, I will elaborate on the less used but extremely useful to know behaviors-related features as well.

If you are curious to see what my final implementation of this example looks like, go ahead and download the source file from below:

Download Final Source Files

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

1 | 2 | 3