Ultrashock Tutorials > Flash MX 2004 > Introduction to Timeline Effects and Behaviors  
 
by Michelangelo Capraro, Tinlion.com
Download Source Files (1MB)  
 
Introduction to Timeline Effects and Behaviors
 

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

Michelangelo Capraro is co-author of
Skip Intro: Flash Interface Design and Usability.
Click to check it out at Amazon.com!
- discuss this tutorial -


In this next part of the exercise, you will be adding cue points to the MediaDisplay that is playing the MP3 file. Cue points are designated times in the MP3 file when you might want certain events to occur in other parts of your movie. With the help of the last 2 Media-related Behaviors, we are able to easily use cue points to control a movie clip or slide show.
  1. Select the MediaDisplay instance called "audio" on your Stage and open the Component Inspector to view its properties.
  2. Near the bottom of the Component Parameters there is an are where you can add cue points. Clicking the Plus button adds a cue point, and clicking the minus button removes them. In the Name column is the cue point name and the second column indicates the position in the time of the MP3 file when that cue point should be triggered. Create four cue points:

    frame1 at 1 second

    frame2 at 5 seconds

    frame4 at 15 seconds

    frame5 at 20 seconds

    Set some cue points for the MediaDisplay component
  3. With the MediaDisplay instance still selected, choose the Labeled Frame Cuepoint Navigation Behavior from the Media category in the Behaviors list.
  4. In the Labeled Frame CuePoint Navigation dialog box, select the MovieClip named "labeldFrames" and check the box next to "gotoAndStop?"Then click the "OK" button. This Movie Clip is going to be controlled by the cue points. If you were to look inside the labeldFrames MovieClip, you would notice that there are frame labels that correspond to the cue point names.

    Select the clip to control with cue points
  5. Test your movie. You should see "labeldFrames" MovieClip change to the frame labels corresponding directly to the cue points you designated in the MediaDisplay component.

Notice the labeldFrames clip and how it is affected by the MP3 file

You can see that the Labeled Frame CuePoint Behavior is quite simple yet powerful in its capabilities. It gives you the ability to control a movie or even multiple movies with sound and/or video with the precision of a millisecond. Now, we are going to make a few last adjustments to your movie to see how you can control the slide presentation itself with cue points.

You will notice that I've set up the movie you are currently using with four child slides. Each of the slides has a small label in the bottom-left corner of the stage indicating which slide it is. If you test your movie and use the right and left arrow keys on your keyboard, you can cycle through the slides.

The Screen Outline Pane should be visible in Flash as well and should display the four child slides located beneath the master slide called "presentation".

There are 4 child slides in your current movie

  1. On the Master slide called "presentation" which you have been working on, select the MediaDisplay instance called"audio". Open the Component Inspector to view the Parameters for this instance of the component.
  2. Now you are going to change the cue point names you assigned earlier. Remember how for the Labeled Frame CuePoint Navigation Behavior, the cue points had the same names as the frames in the target Movie Clip? Well, the Slide CuePoint Navigation Behavior works very much the same, with the difference being that the cue point names will need to match the names of the slides you wish to switch to at the specific time indicated in the cue point. Change the names of the existing cue points to: slide1, slide2, slide3 and slide4.

    Change the names of the cue points to match the names of the slides in the presentation
  3. With the audio instance of the MediaDisplay component still selected, open the Behaviors Panel. Select the Labeled Frame CuePoint Navigation Behavior and click the Minus button to remove it from the Behavior list.

    Select and remove the Labeld Frame CuePoint Navigation Behavior
  4. Click the Plus button and select the Slide CuePoint Navigation Behavior located in the Media category.
  5. In the Slide CuePoint Navigation dialog box, you are prompted to select the slide that contains children slides named the same as the cue points you designated. Select the slide called "presentation" and click the "OK" button.

    Select the silde containing the children slides you wish to switch to using the Slide CuePoint Navigation Behavior.
  6. Test your movie and let the audio play. You should see that the slides change when the audio reaches the cue points you specified.

That rounds out the Media Behaviors. These behaviors really will make it easier for you to control audio and video assets as well as allowing those assets to control your movie. The CuePoint Navigation Behaviors seem especially useful for presentation purposes where you want to sync audio and video content with other content on the screen.

The next set of Behaviors we will look at are the Movieclip Behaviors. Flash MX 2004 ships with 12 Movieclip behaviors to help make your life easier when yo are building a project that requires, perhaps the ability to drag MovieClips around the Stage or maybe load and external SWF file into a MovieClip. The Movieclip Behaviors present some of the best examples of how helpful Behaviors can be. To demonstrate, I'll walk you through combining several of the Behaviors together on one Movie Clip to generate a pretty complex movie without the need for you to type a single line of ActionScript. Let's put those Behaviors to work...

  1. Create a new Flash Document.
  2. Using the Oval Tool, draw a small circle on the Stage.
  3. Select the circle and convert it to a Movie Clip Symbol ( Modify->Convert to Symbol or F8). Name the Symbol to your liking and click the "OK" button.
  4. Give your new Symbol the instance name of "circle_mc".
  5. With your circle_mc Movie Clip selected on the Stage, open your Behaviors Panel and select the Start Dragging Movieclip Behavior.
  6. In the Start Dragging Movieclip dialog box, select your Movie Clip instance should already be selected, so just click the "OK" button.

    Your circle_mc Movie Clip is already selected in the Movie Clip List
  7. In the Behaviors list, you will want to assign the Start Dragging Behavior to the On Press event. This will cause the Behavior to be activated when you click on the circle_mc Movie Clip at run time.

    Select the On Press event for activating the Start Draggin Behavior
  8. Now click the Plus button in your Behaviors Panel and add the Stop Dragging Movieclip Behavior to your circle_mc Movie Clip. This Behavior doesn't have any properties to change, so it will just show you a dialog box indicating its functionality. You can click "OK" to dismiss the dialog box".
  9. Test your movie now. You should find that clicking and dragging the circle_mc Movie Clip allows you to actually drag it around the screen, and when you release your mouse button, it should stop. That was easy!

    One thing i noticed with this arrangement of the Behaviors for the circle_mc Movie Clip is that if you click and drag the circle shape and quickly move around the screen while releasing the mouse button, the circle shape tends to get "stuck" to the mouse cursor. Well, that can be remedied right in the Behaviors Panel.
  10. Close your test movie if you haven't already and select your circle_mc Movie CLip on the Stage. In your Behaviors Panel, add another Stop Dragging Movieclip Behavior, but this time set its event to On Release Outside. This should then stop the Movie Clip from being dragged around regardless of if the mouse cursor is over the clip being dragged or not.

    You can add another Stop Dragging Behavior and assign it to the On Release Outside event
  11. Test your movie. Now, your circle_mc Movie Clip stops following the mouse cursor the moment you release the mouse button.

Let's continue exploring the Movieclip Behaviors. We'll continue to use the current Flash Document, but we'll add another Movie Clip that will be used as a button to make duplicates of the circle Movie Clip. Sound complicated? It could be if you had to write out all the ActionScript for it, but Behaviors will make it way easier...

  1. Using the Rectangle Tool, draw a small rectangle on the screen and convert it into a Movie Clip Symbol.
  2. Give this new Movie Clip the instance name "dupButton_mc"

    Create a new rectangle on the Stage and give it the instance name dupButton_mc
  3. With your rectangle selected, apply the Duplicate Movieclip Behavior from the Movieclip category of the Behaviors Panel.
  4. In the Duplicate Movieclip dialog box, select the circle_mc Movie Clip as the clip you want the Behavior to duplicate. Click "OK" when you are done.

    Select the cricle_mc clip to duplicate
  5. Test your movie. Clicking on the dupButton_mc Movie Clip should create duplicate circle_mc clips on the Stage. What's more, each of the circle_mc duplicates can be dragged and dropped just like the original!



    You may notice that the bottom-most circle remains at the bottom even when it is being dragged, which may not be ideal. Lets fix that next.
  6. Close your test movie and return to your Stage. Select the circle_mc Movie Clip and add the Bring To Front Behavior located in the Movieclip category of the Behaviors Menu.
  7. In the Bring to Front dialog box, select the circle_mc Movie Clip as the clip you want to send to the front. Click the "OK" button when you are finished.

    Select the clip you wish to send to the front
  8. In the Behaviors Panel, you will want to change the event for the Bring to Front Behavior to On Press. This will bring the circle Movie Clip to the top of all the other clips whenever you click on it.


  9. Once again, test your movie. Now you will see that no matter how many circles you duplicate, the one you click to drag will always rise to the top of the stack of clips.

As you can see, the Movie Clip Behaviors are very effective in quickly throwing together what would typically require some quiet coding time to do right. One of the really nice features of the Behaviors Panel is the simple fact that it allows you to add many Behaviors to one instance on the Stage while letting you customize the events that trigger each of those Behaviors. This allows you to develop very customized interaction for your project and save a little tome doing it! Next, we will look at the Movie Clip Behaviors that control the Timeline.

  1. Open the move called behaviors_movieclip_01.fla from your working directory. This file was included the package of source files you downloaded at the beginning of the article.

    This is a simple movie that contains three frame labels. If you move the Play head down the Timeline, you will see that for each label, there is a text field on the Stage that indicates what label you are on.

    This simple movie has 3 frame labels
  2. Using the Rectangle Tool, draw a rectangle on the Stage. Make sure that you are currently on the layer called "buttons". Select the rectangle and convert it into a Movie Clip.
  3. With the rectangle Movie Clip selected, apply the Goto and Stop at frame or label Behavior from the Movieclip category.
  4. In the Goto and Stop at frame or label dialog box, select the _root movie from the Movie Clip List and specify "section2" as the frame label to go to. Click the "OK" button when you are finished.

    Select the _root movie and target rfame section2
  5. Test your movie. You will notice that when clicking on the rectangle, the play head moves to the frames labeled "section2". This is indicated by the text field that changes in the upper left of the Stage.

The Goto and Stop on frame or label and the Goto and Play on frame or label Behaviors are nearly identical except that one stops on the destination frame and the other plays from the point on in the movie. These two Behaviors will most likely become the most common ones for many designers and developers and allows you to control the playback of your movie without needing to even look at the Actions Panel.

Let's keep using this movie for the next couple of excesses that involve the rest of the Movieclip Behaviors.

  1. Close your test movie and return to the Stage. Open your Library and drag another copy of the rectangle Movie Clip you created earlier to the Stage.
  2. Give the Movie Clip the instance name, graphicHolder_mc.

    Name the new rectangle Movie Clip graphicHolder_mc
  3. With the new rectangle selected, apply the Unload Movieclip Behavior to it. In the Movie Clip list, select the graphicHolder_mc clip itself, as the clip to unload.

    Select the appropriate clip to unload
  4. Now on the layer named "actions", make a Keyframe at frame 10.

    Make frame 10 a keyframe
  5. With frame 10 still selected, open your Behaviors Panel and select the Load Graphic Behavior from the Movieclip category.

    Apply the Load Graphic Behavior to Frame 10
  6. In the Load Graphic dialog box, enter the URL of a JPEG file. I entered the URL to one of my favorite desktops on the Ultrashock site. Select the graphicHolder_mc Movie Clip from the Movie Clip list. This will be the clip that the graphic will be loaded into. When you are finished, click the "OK" button.

Enter a URL of a graphic and select the clip that it will get loaded into

  1. Now test your movie again. You will notice now when you click on the first rectangle you placed on the Stage, it not only takes you to the second frame label, but that frame, in turn, fires off the Load Graphic Behavior which loads the JPEG file you specified into the second rectangle. Clicking on the image after it has loaded, unloads it using the Unload Movieclip Behavior.

The graphic is loaded into the second rectangel clip when you click the first one

That is the end of the Movieclip-related Behaviors. You can see that these are some of the most powerful Behaviors in the bunch because of the fact that they simplify the ActionScript that some of us have had to write too many times; tasks like loading images, loading other SWF files, creating drag and drop elements, controlling the movie playback with frame labels; and reduced them into simple point and click dialog boxes.

- discuss this tutorial -
 
©2003 Ultrashock.com - All rights reserved