USING FRAME EVENTS

Frame events are probably the easiest events to understand. When you attach a series of actions to a keyframe on the timeline, Flash executes those actions when the movie reaches that frame during playback. Frame events are great for triggering actions based on the passage of time or actions that need to be somehow synchronized with elements currently visible on the stage.

TIP

Many dynamically based projects need to have a number of things set in place as soon as they begin to play. Known as initializing, this process usually involves creating data or establishing certain aspects of the movie's functionality. For this reason, many developers place a number of actions on Frame 1 of the main timeline to implement this initialization process. These actions are then used to create variables and arrays as well as to define functions all of which may be needed soon after the movie begins to play.

In the following exercise, we'll create a simple self-running presentation that displays pictures and related text sequentially using frame events.

1. Open FrameEvents1.fla in the Lesson02/Assets folder; then open the Property inspector.

   First, let's get acquainted with what's on the stage.

   This 200-frame scene contains six layers (named according to their content), five text fields, three buttons, and two movie clip instances. The movie will begin playing at Frame 1, displaying a picture and associated text on the screen. We will be placing actions on Frame 200 to advance the picture as well as send this timeline back to Frame 1 to begin the process all over again. Because our movie is set to play at 20 frames per second, each picture (and the information it contains) will be visible for 10 seconds (200 frames divided by 20 frames a second) before moving on. If you select the picture in the middle left portion of the stage, you'll notice on the Property inspector that this is a movie clip instance named picture, which itself contains several pictures: These form the basis of our slide show. Soon, we'll add frame events to this clip's timeline. The other movie clip instance, indicator, appears as a small white circle in the bottom right corner of the stage. This instance contains a short animation that alerts the user that the picture is about to change (in case he or she wants to pause the presentation).

   There are three text fields to the right of the picture movie clip instance: These fields have instance names of (in clockwise order) date, country, and caption. Using frame events, these will be filled with information related to the currently displayed picture. Two other text fields appear above and to the left of our control (Play, Stop, and Rewind) buttons. The text field above these buttons is named warning because this is where text will be displayed indicating that the picture is about to change. To the left of the control buttons is a text field named balloon. When the user rolls over one of the control buttons, the function of that button will be shown here.

   

2. Double-click the picture movie clip instance in the middle of the stage to edit it in place.

   You're now looking at this movie clip's timeline. It contains two layers labeled Pix and Actions. The Pix layer contains five keyframes, each of which contains a different picture. (You can move the playhead to view these pictures, if you wish.) The Actions layer contains six blank, or empty, keyframes. (We'll explain shortly why this layer has one more keyframe than the Pix layer.)

   

   Now let's fill these empty keyframes with scripts.

3. With the Actions panel open, select Frame 1 on the Actions layer and add this script:

    stop ();  _root.date.text = "June 15th";  _root.country.text = "Scotland";  _root.caption.text = "Isn't this a beautiful place?"; 

   The first action will prevent this movie clip from playing beyond Frame 1 until we instruct it to.

   The next three actions place text into the appropriate text fields on the main timeline. This textual information relates to the graphic that appears on Frame 1 of the Pix layer on this timeline. In other words, whenever this timeline is on this frame, the visible picture and the text displayed in the text fields will coincide with one another.

4. With the Actions panel open, select Frame 2 on the Actions layer and add this script:

    _root.date.text = "June 16th";  _root.country.text = "Italy";  _root.caption.text = "The food was excellent!"; 

   When this movie's timeline is moved to Frame 2, these three actions will update the respective text in the appropriate text fields on the main timeline. This textual information relates to the graphic that appears on Frame 2 of the Pix layer on this timeline.

5. With the Actions panel open, select Frames 3, 4, and 5 on the Actions layer and add the following scripts, respectively:

   Place on frame 3:

    _root.date.text = "June 17th";  _root.country.text = "Greece";  _root.caption.text = "We went for a boat ride."; 

   Place on frame 4:

    _root.date.text = "June 18th";  _root.country.text = "France";  _root.caption.text = "We took another boat ride."; 

   Place on frame 5:

    _root.date.text = "June 19th";  _root.country.text = "Monaco";  _root.caption.text = "The mountains were amazing!"; 

   Each of these sets of actions has the same effect as the previous two sets; the only difference is that these are triggered when this movie's timeline is moved to Frames 3, 4, and 5, respectively.

   

6. With the Actions panel open, select Frame 6 on the Actions layer and add this script:

    gotoAndStop (1); 

   As you'll soon see, we'll advance through the frames in this movie clip dynamically by telling Flash to simply go to the next frame in the timeline we won't use frame numbers or labels. Since we run out of pictures after Frame 5, this script is triggered when the movie clip is advanced to the next frame (Frame 6) immediately sending the timeline back to Frame 1, and the first picture. Thus, our demonstration loops through these five graphics until the presentation is stopped or the user exits it.

   The way this is set up, it should be easy to add additional pictures and text to the presentation.

   Now let's set up the functionality that advances our presentation through these graphics.

7. Return to the main timeline. With the Actions panel open, select the keyframe on Frame 140 and add the following script:

    warning.text = "The picture will change in 3 seconds.";  indicator.gotoAndPlay ("On"); 

   Eventually, Frame 200 will contain a script to advance the picture being displayed. Since our movie is set to play at 20 frames per second, placing this script on Frame 140 will cause it to be executed three seconds (200 frames minus 140 frames equals 60 frames, or 3 seconds) prior to the picture change.

   The first action displays a warning message in the warning text field instance indicating that the picture will change in three seconds. The next action sends the indicator movie clip instance to the frame labeled On, where a short animation acts as a visual cue that the picture is about to change.

8. With the Actions panel open, select the keyframe on Frame 160 and add the following script:

    warning.text = "The picture will change in 2 seconds."; 

   This action simply updates the message in the warning text field to indicate that the picture will be changing in two seconds.

9. With the Actions panel open, select the keyframe on Frame 180 and add the following script:

    warning.text = "The picture will change in 1 second."; 

   This action simply updates the message in the warning text field to indicate that the picture will be changing in one second.

10. With the Actions panel open, select the keyframe on Frame 200 and add the following script:

     pictures.nextFrame();  warning.text = "";  gotoAndPlay (1); 

    

    This set of actions represents the foundation that makes our presentation work. If the act of displaying a picture and its associated text for 10 seconds were called a cycle, these actions would be executed at the end of each cycle.

    The first action advances the pictures movie clip instance to the next frame of its timeline. Doing so will cause the next picture to be displayed and the frame actions on that frame to be triggered. This will cause the text info for that picture to be displayed as well.

    The next action clears all text from the warning text field since the warning phase is complete at least for several seconds.

    The last action sends the main timeline back to Frame 1, which continues to play, and the entire process is repeated.

    Since we want to let the user control the presentation's playback, that will be our focus in the next few steps.

11. With the Actions panel open, select the triangular button on the control panel and add the following script:

     on (release) {    play ();  }  on (rollOver) {    balloon.text = "Play";  }  on (rollOut) {    balloon.text = "";  } 

    Here you can see that this button will respond to three events: When it's pressed and released, the main timeline will play (though obviously only if the presentation was stopped in the first place); when it's rolled over, the word Play will appear in the balloon text field (providing the user with a visual cue as to what the button does); and when it's rolled away from, the balloon text field will be cleared.

    

12. With the Actions panel open, select the square button on the control panel and add the following script:

     on (release) {    stop ();  }  on (rollOver) {    balloon.text = "Stop";  }  on (rollOut) {    balloon.text = "";  } 

    This button is also set up to respond to three mouse events: When the button is pressed and released, the main timeline will stop (though only if it was playing in the first place); when it's rolled over, the word Stop will be displayed in the balloon text field (to cue the user as to what the button does); and when the user moves away from the button, the balloon text field is cleared.

13. With the Actions panel open, select the double-triangular button on the control panel and add the following script:

     on (release) {    gotoAndPlay (1);    pictures.gotoAndStop (1);    warning.text = "";  }  on (rollOver) {    balloon.text = "Rewind";  }  on (rollOut) {    balloon.text = "";  } 

    When this button is pressed and released, the main timeline and the picture movie clip instance are sent back to Frame 1. This resets the presentation to its original state, regardless of how it's progressed. The next action will display the word Rewind in the balloon text field when the button is rolled over (to cue the user as to what the button does). The rollOut event empties the balloon text field when the user moves away from the button.

14. From the menu choose Control > Test Movie to see the movie in action.

    View the presentation from start to finish to get a feel for how it works. Use the control buttons to control playback.

15. Close the test movie to return to the authoring environment. Save your work as FrameEvents2.fla.

    You have now completed this exercise. As you can see, by using frame events properly, you can create highly interactive presentations that you can add to easily.