Skip to main content
S
surfmad1
Participating Frequently
October 2, 2009
Answered

Tween fade animation with buttons

  • October 2, 2009
  • 1 reply
  • 1003 views

Hi, can anyone help me!

I have four movie clips with instance names of "purple_ob", "green_ob", "orange_ob" and "blue_ob"

and four buttons "purple_but", "green_but", "orange_but" and "blue_but"

I want to have the movie clips automatically fade from one to another continually with a 5 second pause inbetween, but then if the user clicks one of the four buttons it will fade the relevant movieclip in. Then if nothing else is pressed the fading will carry on working through the four images in a loop.

So far I have the movie clips fading on a button press but how do I implement the automatic fading from one MC to another?

I've added the code below into the first frame of my scene

//My actionscript 2.0 code

import mx.transitions.Tween;

import mx.transitions.easing;

purple_but.onPress = function() {

purple_ob.alpha = 0;

purple_ob._x = 0;

purple_ob._y = 0;

var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

var alphaTween2:Tween = new Tween(purple_ob, "_alpha", Strong.easeIn, 0, 100, 15, false);

var currentPage:String = purple_ob;

purple_ob.swapDepths(thedepth += 1);

};


green_but.onPress = function() {

green_ob.alpha = 0;

green_ob._x = 0;

green_ob._y = 0;

var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

var alphaTween2:Tween = new Tween(green_ob, "_alpha", Strong.easeIn, 0, 100, 15, false);

var currentPage:String = green_ob;

green_ob.swapDepths(thedepth += 1);

};


orange_but.onPress = function() {

orange_ob.alpha = 0;

orange_ob._x = 0;

orange_ob._y = 0;

var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

var alphaTween2:Tween = new Tween(orange_ob, "_alpha", Strong.easeIn, 0, 100, 15, false);

var currentPage:String = orange_ob;

orange_ob.swapDepths(thedepth += 1);

};


blue_but.onPress = function() {

blue_ob.alpha = 0;

blue_ob._x = 0;

blue_ob._y = 0;

var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

var alphaTween2:Tween = new Tween(blue_ob, "_alpha", Strong.easeIn, 0, 100, 15, false);

var currentPage:String = blue_ob;

blue_ob.swapDepths(thedepth += 1);

}

This topic has been closed for replies.
Correct answer Ned Murphy

I felt like playing with it, so here's one approach.  Someone else may have a different approach or might simplify this one:

import mx.transitions.Tween;
import mx.transitions.easing;

var ob_array = new Array(purple_ob, green_ob, orange_ob, blue_ob);
var ob_count = 0;
var currentPage = purple_ob;

var intervalID = setInterval(fadeOBs, 3000); // adjust the 3000 (3 secs) as desired

green_ob._alpha = 0;
orange_ob._alpha = 0;
blue_ob._alpha = 0;

purple_ob._x = 0;
purple_ob._y = 0;
green_ob._x = 0;
green_ob._y = 0;
orange_ob._x = 0;
orange_ob._y = 0;
blue_ob._x = 0;
blue_ob._y = 0;

function fadeOBs(){

      clearInterval(intervalID);
      intervalID = setInterval(fadeOBs, 3000);

      ob_count += 1;
      if(ob_count >= ob_array.length){
            ob_count = 0;
      }

      var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

      var alphaTween2:Tween = new Tween(ob_array[ob_count], "_alpha", Strong.easeIn, 0, 100, 15, false);


      currentPage = ob_array[ob_count];
      ob_array[ob_count].swapDepths(thedepth += 1);
}

purple_but.onPress = function() {
      ob_count = -1; // one less than this
      fadeOBs();
}

green_but.onPress = function() {
      ob_count = 0; // one less than this
      fadeOBs();
}

orange_but.onPress = function() {
      ob_count = 1; // one less than this
      fadeOBs();
}

blue_but.onPress = function() {
      ob_count = 2; // one less than this
      fadeOBs();
}

1 reply

Ned Murphy
Ned MurphyCorrect answer
Legend
October 2, 2009

I felt like playing with it, so here's one approach.  Someone else may have a different approach or might simplify this one:

import mx.transitions.Tween;
import mx.transitions.easing;

var ob_array = new Array(purple_ob, green_ob, orange_ob, blue_ob);
var ob_count = 0;
var currentPage = purple_ob;

var intervalID = setInterval(fadeOBs, 3000); // adjust the 3000 (3 secs) as desired

green_ob._alpha = 0;
orange_ob._alpha = 0;
blue_ob._alpha = 0;

purple_ob._x = 0;
purple_ob._y = 0;
green_ob._x = 0;
green_ob._y = 0;
orange_ob._x = 0;
orange_ob._y = 0;
blue_ob._x = 0;
blue_ob._y = 0;

function fadeOBs(){

      clearInterval(intervalID);
      intervalID = setInterval(fadeOBs, 3000);

      ob_count += 1;
      if(ob_count >= ob_array.length){
            ob_count = 0;
      }

      var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

      var alphaTween2:Tween = new Tween(ob_array[ob_count], "_alpha", Strong.easeIn, 0, 100, 15, false);


      currentPage = ob_array[ob_count];
      ob_array[ob_count].swapDepths(thedepth += 1);
}

purple_but.onPress = function() {
      ob_count = -1; // one less than this
      fadeOBs();
}

green_but.onPress = function() {
      ob_count = 0; // one less than this
      fadeOBs();
}

orange_but.onPress = function() {
      ob_count = 1; // one less than this
      fadeOBs();
}

blue_but.onPress = function() {
      ob_count = 2; // one less than this
      fadeOBs();
}

S
surfmad1Author
Participating Frequently
October 2, 2009

Ned, unfortunately because the movieclip depth is increasing the MC's are fading in over the buttons is there an easy way to fix that?

many thanks for your help!!!!!!!

Ned Murphy
Ned Murphy
Legend
October 2, 2009

You can try eliminating the swapDepths entirely and see if that is sufficient... since you have thing fading simultaneously, it may not matter.

Or you can swapDepths between the fading-out mc and the fading-in mc rather than incrementing to a new depth all the time.  That way they always stay within their designed depths.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices