Flash Actionscript 3 & Oscillating Object Alpha Animation

Question

How would I go about animating via Actionscript in Flash something like the following?:

I have several squares scattered on my stage with random Alpha values. When the movie loads, I'd like each square to smoothly animate to whatever their current alpha value is to zero, then to 1, and repeat the cycle indefinitely.

As a bonus, I'd like to be able to have each square stall for a period of time at alpha=1 before continuing to cycle.

I've gathered from an online tutorial that I should set up my square (ImageTile) as an object:

package {

    import flash.display.*;
    import flash.events.*;

    public class ImageTile extends MovieClip {

     var tileAlpha = this.alpha;

     public function ImageTile() {
      // construct here
      this.addEventListener(Event.ENTER_FRAME, AnimateTile);
     }

     function AnimateTile(e:Event) {
      // animation to go here
     }

    }

}

... but the math for what I want to do escapes me. Any help would be greatly appreciated!

Answer 1

Maybe the Dissolve effect or Fade (both comes with sample & code on the bottom of the page). I believe you'll want those effect to play in sequence (may not be necessary to code it in ActionScript). Then in order to get it to stay at alpha=1, I would add an event to the effect and check its alpha value and either set a delay or temporarily pause the animation. I ran a simple tests just animating the alpha values and it seems to work.

You can set repeatCount to 0 to play the effect indefinitely and a repeatDelay to get it to stay at final alpha values (then maybe you won't have to add any additional event handlers).

var eff : Dissolve = new Dissolve();
eff.alphaFrom = ...;
eff.alphaTo = 0;
// set repeatCount & repeatDelay if necessary
eff.play([list of targets]);

Answer 2

Okay, so I managed to figure out roughly what I had wanted using two timers:

package {

import flash.display.MovieClip;
import flash.events.*;
import gs.TweenLite;
import fl.motion.easing.*;
import flash.utils.Timer;

public class ImageTile extends MovieClip {  

 public function ImageTile() {
  var atimer:Timer = new Timer(Math.floor(Math.random()*20*1000),1);
  atimer.addEventListener(TimerEvent.TIMER, initSquares);
  atimer.start();
 }

 function initSquares(e:Event) {
  //trace("should be 15 of these, no more!");
  var timer:Timer = new Timer(10000);
  timer.addEventListener(TimerEvent.TIMER, fade);
  timer.start();
 }

 function fade(e:Event) {
  TweenLite.to(this, 2, {alpha:Math.random()});
 }

}

}

Basically, my main requirement was that each square do a fade animation with a fixed interval between, and that they all not do it on the same interval. I'm sure this is not as clean as it could be, so any re-factoring would be appreciated.

I'll also note that I'm using the TweenLite library for my fade.

Answer 3

You could probably get rid of the timer, but it wouldn't change it too much, honestly.

import fl.motion.easing.*;

import flash.display.MovieClip;
import flash.events.*;
import flash.utils.Timer;
import flash.utils.setInterval;
import flash.utils.setTimeout;

public class ImageTile extends MovieClip {              

    public function ImageTile() 
    {
        flash.utils.setTimeout(initSquares, Math.floor(Math.random()*20*1000);
    }

    function initSquares() 
    {
            flash.utils.setInterval(fade, 10000);
    }

    function fade() 
    {
            TweenLite.to(this, 2, {alpha:Math.random()});
    }

}