01. Introduction to Timeline Effects 02. Timeline Helpers 03. Assistants 04. Effects 05. Transform/Transition

06. Applying multiple effects  07. Behaviors: controversial interactivity 1  08. Behaviors: controversial interactivity 2  09. Behaviors: controversial interactivity 3  10. Wrap up

go to previous page

- discuss this tutorial -

go to next page

07. Behaviors: Controversial Interactivity

I must confess, I'm a big code head. I have been writing so much code lately that I've forgotten what Timeline animation looks like. One of the things that seems to happen to some of us Flash developers as we transition into full-time ActionScripters is that our ActionScript starts to appear in less places in the Flash movies we build. Many ActionScripters don't even use the Timeline for animation anymore and rely solely on ActionScript to handle their animation needs. In many cases, this type of advanced ActionScript is written and placed in one frame in the main Timeline and it is often considered bad practice to place code on or inside Symbols directly by way of onClipEvents or button handlers. So, as we coders try and help the novice and non-coders in the Flash community learn the "right" practices for coding to help further the movement away from attaching ActionScript to Movie Clips on the Stage, what does Macromedia do?

They release Flash MX 2004 featuring Behaviors, which are essentially code snippets that are placed - yup, you guessed it - as onClipEvents and attached to Movie Clips on the Stage. Now I know there are going to be a lot of coders out there that may see this as going against commonly held best practices, but, after spending some time with Behaviors, I think its not such a bad solution.

Now, for the non-code-heads reading this and wondering what the heck I'm yappin' about, don't worry about it, it's just me being over-dramatic. So let's take a closer look at Behaviors, shall we?

Behaviors exist to make it easy for Flash developers not familiar or comfortable with ActionScript to attach simple to complex functionality to items on the Stage and even Frames in the Timeline. Those of you who were familiar with the " Normal " mode of the Flash MX Actions Panel can view Behaviors as the replacement. In fact, Behaviors are much easier to use than the old Normal mode Actions Panel: you simply select a Movie Clip on the Stage or a Keyframe in your Timeline, and select the Behavior to attach from the Behaviors Panel. That's all there is to it!

Let's examine the Behaviors Panel. If it's not already open, open your Behaviors Panel by selecting Window->Developer Panels->Behaviors or pressing Shift+F3.

The Behaviors Panel is really pretty simple. Under the Behaviors Panel title bar, there is a plus button, which adds behaviors to the selected item, a minus button, which removes a selected behavior from the selected item, an icon and label describing the currently selected item, and up and down arrow buttons on the very right that allow you to control the stacking order of behaviors in the list. If you have nothing selected on the Stage, the Behaviors Panel assumes you want to add Behaviors to the currently selected Keyframe.

Clicking on the Plus button drops down a menu of Behavior categories each of which contain Behaviors related to that category. For example, the Movieclip category contains Behaviors that affect Movie Clips in some way.

There are many Behaviors that ship with Flash MX 2004. They range from the very simple to the very complex. Let's start off by adding a couple of simple behaviors to a new movie.

1. Create a new Flash Document.
2. With your Behaviors Panel open, select the first Frame in the only Layer in your Timeline. The Behaviors Panel should indicate that you have the first frame on Layer 1 selected.
   
   
   
3. Click on the Plus button in the Behaviors Panel and select Load External Movieclip from under the Movieclip sub menu. A dialog box should appear.
   
   
   
4. This Behavior loads an external Flash Movie into the Movie Clip you specify. The first thing you want to do is specify the location of the Flash Movie (the SWF file) you want to load. Type in " test_movie.swf ", this is one of the SWFs that was included in the source files package you unzipped into your working directory at the beginning of this article.
   
5. Since we have no Movie Clips on the Stage, we will tell the Behavior to load the SWF file into the _root Timeline. To do this, select the _root Movie Clip from the Movie Clip list. The field text field right above the Movie Clip list should indicate that you have selected " this._parent ".
   
6. Select the Absolute Radio Button. The text field above the Movie Clip list should now read " _root ".
   
7. Now click the "OK" button to apply the Behavior.
   
8. Save your movie now into your working directory and call it "behaviors_frame.fla".
   
9. Test your movie ( Control->Test Movie )

You should see the test_movie.swf load successfully in your test movie. Let's add another Behavior to the Frame.

1. Close your test movie and select Frame 1 of Layer 1 again and have your Behaviors Panel open.
2. Click the Plus button in your Behaviors Panel and add the Go To Web Page Behavior under the Web category.
   
   
   
3. In the Go to Web Page dialog box, change the URL field to the web site address of your choice, and tell it to open in a new browser window by selecting " _blank " from the Open in drop down list.
   
   
   
4. Now test your movie again. This time the test_movie.swf Movie should load and a browser window should appear loading the URL you specified in the Behavior.

You can see that by adding multiple Behaviors to one element, yo can start to achieve more complex functionality, and all without having to write a line of ActionScript. Now close your test movie and let's take a look at what is happening behind the scenes.

Select Frame 1 of Layer 1 and open your Actions Panel ( Window->Development Tools->Actions or F9).

You will notice that the Behaviors you added to the frame were simple snippets of ActionScript that Flash wrote out for you. If you select all the ActionScript in the Actions Panel and erase it, the Behaviors panel will then be empty, Thus proving the point that Behaviors are a simple and helpful interface to the potentially complex ActionScript you might have needed to write yourself.

Along with being helpful, the Behaviors Panel can be pretty smart too. Follow along while I demonstrate:

1. Create a New Flash Document.
2. Using the Rectangle Tool, create a shape on the Stage and select it.
3. Open your Behaviors Panel ( Windows->Developer Tools->Behaviors or Shift+F3) and click on the Plus button
4. Roll your mouse cursor down to the Movieclip category of Behaviors.

Take note that there are two Behaviors in the Movieclip category. Now:

1. Select your red rectangle and convert it into a Symbol ( Modify->Convert to Symbol... or F8)
2. In the Convert to Symbol dialog box, select Graphic and click the "OK" button.
3. Now, with the new symbol selected on the Stage, click the Plus button in your Behaviors Panel and roll your mouse cursor down to the Movieclip category.

Notice now that there are three more Behaviors available in the Movieclip category. Now:

1. Select your red square Graphic symbol on the Stage and convert it to a Symbol again ( Modify->Convert to Symbol... or F8)
2. This time, in the Convert to Symbol dialog box, select Movie Clip and click the "OK" button.
3. Again, click the Plus button in your Behaviors Panel and roll your mouse cursor down to the Movieclip category.

This time , you'll see that the Movieclip sub category of the Behaviors Menu is filled with many more Behaviors that pertain to Movie Clips. The Behaviors Panel knows the type of item you have selected on the Stage and will show you only Behaviors that have been designated to work with those types of items.

Now that you have a good overview of the way Behaviors work behind the scenes, I'll take you through the different Behaviors that ship with Flash MX 2004 and show you how to quickly put them to work. We'll start at the top of the list with the Data category in the Behaviors list. To use a Data behavior, you need to have Data components available on the Stage. In this case, I have included a movie with the necessary parts already present on the Stage and wired together. All we need to make it work is a button with the Data Behavior attached.

1. Open the Flash Document called behaviors_data_trigger.fla It should have been included in the source files that you unzipped earlier to your working directory. On the Stage you will see to components that are included with Macromedia MX Professional 2004; the XMLConnector and the DataGrid. The XMLConnector retrieves XML data from a source, in our case, a news feed found on the Web. The DataGrid is bound to the XMLConnector and will display the data found in the XML. For the XMLConnector component to actually retrieve the XML, it needs to be triggered.
   
   
   
2. Using the Rectangle Tool, draw a rectangle on the stage. This will act as a button to trigger the XMLConnector to start retrieving XML from the Web.
   
3. Select the rectangle on the Stage, open your Behaviors Panel, and select the Trigger Data Source Behavior from the Data category. It should prompt you to convert the rectangle to a Symbol. You should agree by clicking "OK".
   
   
   
4. The Trigger Data Source dialog displays any items on the Stage that can triggered to download data. In this case, you will want to select the XMLConnector component called XMLConn, and then click the "OK" button.
   
   
   
5. Test your movie. If you click on the rectangle, you should see the DataGRid populate with news items from onRelease.org.

That covers the only Data type Behavior. The Trigger Data Source Behavior will be helpful to you when you are needing to notify different Data components to retrieve data from different sources depending on the specific components you are using. This Behavior can be used on either a Symbol on the Stage, or applied to a frame.

Let's now move onto the next category of Behaviors, the Embedded Video Behaviors. These Behaviors are really helpful when applied to Button Symbols to help you control the playback of Embedded Video objects you might have on the Stage.

1. Create a new Flash Document.
2. Select File->Import->Import to Stage (or Control+R) and import the Flash Video called spin.flv . Flash should notify you that the video file requires 100 frames to be added to your movie. Click the "OK" button to have Flash automatically added the frames needed.
3. Now we will add some buttons on the Stage onto which you will be attaching behaviors. We will use some buttons from the Buttons Common Library included with Flash MX 2004. Select Window->Other Tools->Common Libraries->Buttons .
   
   
   
4. The Buttons library contains many useful buttons. The ones we are going to use are located in the Playback folder in the Library. Click and drag the gel FastForward, gel Pause, gell Rewind, gel Right, and gel Stop Button Symbols to your stage and arrange them neatly under the Embedded Video on the Stage.
   
   
   
5. Select the button you have designated as the Fast Forward button and open the Behaviors Panel. Assign the Fast Forward Behavior to the button.
   
   
   
6. When the Video Fast Forward dialog box appears, select the target video instance from the list. When you select the video, the Behavior will alert you that the instance must have a name for the Behavior to work, click the "OK" button and give the video the name of "vid". Once you name the video, Flash will no longer prompt you to supply a name for that instance.
   
   
   
   
7. Repeat the last step for each of the other buttons; assigning them each their respective behavior from the Embedded Video list of behaviors.
   
8. Now, return to the Buttons Common Library and select the gel Record button from the Playback folder and drag it to the Stage twice, then resize the two new buttons slightly smaller than the others..
   
   
   
9. Select one of the two newer buttons and assign the Hide Behavior found under the Embedded Video category of the Behavior Menu. Assign the Show Behavior to the other button.
   
10. Test your movie. You should be able to control the video with the playback buttons as well as hide and show the video with the 2 buttons you added later.

If you are building a movie that contains Embedded Video, then the Embedded Video Behaviors offer a real efficient way to create controls for that video.

Next, we are going to tackle the Media Behaviors. These Behaviors are specifically designed to facilitate using the new Media Components available in Flash MX 2004 which allow you to play external Flash Video and MP3 audio files. In this next exercise, you will be incorporating these components and controlling them with the Media Behaviors.

1. Open the movie called "behaviors_media.fla" which should be located in your working directory. This file makes use of the new Slide Presentation features available in Flash MX Professional 2004.
2. Select the slide titled "presentation".
3. From your Components Panel, drag the MediaDisplay component to the Stage.
   
   
   
4. With the Component still selected on the Stage, open your Properties Panel and give the Component the instance name of "display".
   
5. With the MediaDisplay instance selected, open the Component Inspector Panel ( Window->Development Panels->Component Inspector or Alt+F7). Click on the Parameters tab to view the parameters for the MediaDisplay component. Here is where you will assign the video to play and the duration of the video.
   
   
   
6. The video you will be testing with is 4 seconds in duration, so you will want to set the Video Length parameter to 0:0:4:0. Set the FPS drop-down field to 24 and in the URL field enter "spin.flv". Finally, uncheck the Automatically Play check box.
   
7. Next, drag the MediaController component to the Stage and position it below the existing MediaDisplay component. The MediaController component does just what its name implies, it is used to control the play back of a MediaDisplay component. In the Component Inspector Panel, change this component's acticvePlayControl setting to "play", this will ensure that it starts off showing the play button rather than the pause button.
   
   
   
8. With the MediaController component selected on the Stage, open your Behaviors Panel and select the Associate Display Behavior from the Media category. This Behavior binds a MediaController to the MediaDisplay instance you specify.
   
   
   
9. In the Associate Display dialog box, select the MediaDisplay component that you placed on the Stage earlier. It is called "display".
   
   
   
10. Now test your movie. You should be able to control the video playing in the MediaDisplay component with the MediaControls below component below it.

In the next exercise, we will build off of this movie by adding a second set of MediaDisplay and MediaController components. This time, however, we will not be playing a video, but rather an MP3 file.

1. Drag a MediaDisplay component from your Components Panel to the Stage. You can resize it since it will not be displaying anything. Give this component the instance name of "audio" in the Properties Panel.
   
   
   
2. While the component is still selected on the Stage, open the Component Inspector Panel and select the MP3 radio button. Also, check the Automatically Play checkbox so that the MP3 starts to play immediately.
   
   
   
3. Drag another instance of the MediaController component to the Stage. Give it the instance name of "audioControls" in the Properties Panel.
   
4. Now, select the MediaDisplay instance you called "audio" and assign the Associate Controller Behavior to it. This does the same thing as the Associate Display Behavior you assigned earlier, except from the display component to the controller rather than the other way around. You will only ever use either Associate Controller or Associate Display but never both for the same component.
   
   
   
5. In the Associate Controller dialog box, select the MediaController instance called "audioControls".
   
   
   
6. Test your movie again. You should hear the test MP3 file start to play and you should be able to control it with the second MediaController on the Stage.

go to previous page

- discuss this tutorial -

go to next page