1 Reply Latest reply on Jun 24, 2009 10:12 AM by kglad

    Image transition problems

    spectralcav Level 1

      Being new to actionscript, i'm having real issues with what I thought would be quite a simple transitional effect.

       

      I've made a simple test fla with 3 images (movieclips) which move on to the stage from left to right and fade from alpha 0 -100 at the same time. Images move on to the stage in response to clicking 3 separate buttons (Image 1, Image 2 and Image 3). Buttons are set to perform transitional effects which have been 'saved' as functions in the actionscript.

       

      The image that is currently on the stage should fade out as a new image is called in - but I cannot seem to achieve it. Trying to research how to achieve this is getting me nowhere fast, just getting more confused with 'image loaders', 'transition manager', 'arguments' etc, etc

       

       

      Here is my (embarrassing) sample code so far:

       

       

      import mx.transitions.*;

      import mx.transitions.easing.*;

       

      //transition functions

      function transition1() {

      new Tween (img1_mc, "_x", Elastic.easeOut, -680, 0, 24, false);

      new Tween (img1_mc, "_alpha", Regular.easeIn, 0, 100, 24, false);

      new Tween (img2_mc, "_alpha", Regular.easeIn, 100, 0, 24, false);

      new Tween (img3_mc, "_alpha", Regular.easeIn, 100, 0, 24, false);

      }

       

      function transition2() {

      new Tween (img2_mc, "_x", Elastic.easeOut, -680, 0, 24, false);

      new Tween (img2_mc, "_alpha", Regular.easeIn, 0, 100, 24, false);

      new Tween (img1_mc, "_alpha", Regular.easeIn, 100, 0, 24, false);

      new Tween (img3_mc, "_alpha", Regular.easeIn, 100, 0, 24, false);

      }

       

      function transition3() {

      new Tween (img3_mc, "_x", Elastic.easeOut, -680, 0, 24, false);

      new Tween (img3_mc, "_alpha", Regular.easeIn, 0, 100, 24, false);

      new Tween (img1_mc, "_alpha", Regular.easeIn, 100, 0, 24, false);

      new Tween (img2_mc, "_alpha", Regular.easeIn, 100, 0, 24, false);

      }

       

       

      There is more code, but nothing that relates to the transitional effects.

       

       

      Currently, each transition function 'tells' the other 2 images to fade out (whether they are on the stage or not). This works, but some images appear above others which means that they fade out on top of the image that has just been called on to the stage, which is a serious problem.

       

      I guess some additional functions are required in the code that somehow differentiate between what is the current image (which should fade out) and what is the new image (which should move in and fade in above any other image on the stage).

       

       

      Could anyone help me with some code that could maybe point me in the right direction?

       

      Or, maybe there's a tutorial that covers something like this effect?