Adding a Timer Effect to the Montage Engine

This posting describes a modified version of the Montage Engine demonstrated in class March 10. This one uses a Timer object to hold for five seconds whenever we reach one of the two limit cases: upper image fully visible, or upper image fully transparent. This change delays the fade effect and lets each image dwell at full presentation for a short interval.

The Flash movie shown above right shows this modified version in action.


I. Modifications

In order to use the Timer object, we need to make a few modification in the imports:

  import flash.events.TimerEvent;
  import flash.utils.Timer;

These changes should be familiar from our initial presentation of the Timer object. They're just the bits we need in order to run one of those virtual alarm clocks.

The logic we'll be using here also requires a pair of new variables, declared with the other variables in the declaration section:

  var holdTimer:Timer = new Timer(5000,0);
  var hold:Boolean = true;

As you'll recall, holdTimer is an instance variable with which we set up our virtual clock. The Boolean variable hold, as you may suspect, will come into play as a flag variable, indicating whether we are holding on the current image, or not.

You'll also remember that we need an event listener and callback whenever we want to use Timer. Here's the setup in our example:

  holdTimer.addEventListener(TimerEvent.TIMER, clearHold);

The callback function is refreshingly simple:

  function clearHold(event:TimerEvent):void
  {
    hold = false;
  }

Now we come to the crucial method fadeBiz(), which as you'll recall handles the alpha changes and file refreshment:

  function fadeBiz(event:Event):void
  {
    if(hold == false)
    {
      if(fadeDir == "down")
      {
        image_2.alpha -= 0.04;
      }
      else
      {
        image_2.alpha += 0.04;
      }
	  //LIMIT TESTS
      if(image_2.alpha <= 0)
      {
        getImage(image_2);
        fadeDir = "up";
        hold = true;
      }
      if(image_2.alpha >= 1)
      {
        getImage(image_1);
        fadeDir = "down";
        hold = true;
      }
    }
  }

There are only three differences between this code and what you saw in the initial demo. First, we've embedded the IF/ELSE part of the method (the bit that controls alpha changes) in an outer IF test that checks the state of the flag variable, hold. If hold is true, we skip everything that has to do with alpha changes. Nothing happens to the opacity of the two images. We hold in place.

If hold is false, we do the alpha business as usual.

The other two changes fall in the limit-case tests, in thoose two, parallel IF conditions that follow the alpha control section. As you can see, we set hold to true as a consequence of both tests. That is, if image_2 (the upper image) is fully opaque (top image visible), we go into a hold state. If image_2 is fully transparent (bottom image visible), we also hold.

So how does the hold come off? That's what the Timer object does for us. Remember, the callback method clearHold() sets hold to false. Because Timer is programmed to wait for five seconds, the flag is guaranteed to reset after that interval.

II. Source files

Source files for this project can be found in the subfolder montageWithTimer, within the montage folder, in MULTIMEDIA, in the shared account of student-iat. Note that you'll need to place a copy of the pix folder within the local directory, or rewrite the lines that control the URLRequest accordingly.



University of Baltimore Logo

Last updated: 06/24/08 16:26:21
Copyright © 2008 School of Information Arts and Technologies