• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 500
  • Last Modified:

How to modify flash slideshow transistion in my fla

I am working on a flash template and I need to change the transition effects on the homepage slideshow I've created on this test page: http://devphotovideo.com/test.html

I enlisted the help of a freelancer to help build the slideshow which reads files in a folder using asp but the work was already done and now my client wants to change the image transistions.

What I need is to fade the image to black all the way before beginning to fade in the next image. How would I modify the attached code to get this effect. Let me know if you need more information. Thanks in advance everyone!
stop();

// Import classes required for tweening
import mx.transitions.*;
import mx.transitions.easing.*;

/* 	SET ALIASES
	I do this so I don't have to keep typing the full path
	to the target objects over and over again. 
	For example, instead of having to type 'slides_mc.slide1.source_btn'
	throughout the code, I'll only have to type 'button1' */
var pic1:MovieClip = slides_mc.slide1;
var pic2:MovieClip = slides_mc.slide2;
var source1:TextField = pic1.source_txt;
var source2:TextField = pic2.source_txt;
var owner1:TextField = pic1.owner_txt;
var owner2:TextField = pic2.owner_txt;
var button1:Object = pic1.source_btn;
var button2:Object = pic2.source_btn;

/* 	A problem I had with this sample is that during the 
	cross-fade there was no way of knowing 
	which button was active...the one fading out or the one fading in. 
	To avoid confusion I make the buttons invisible until the image
	has completely faded in. */
button2._visible = false;

// Init variables
var currClip:MovieClip = pic1; //tracks which clip is being viewed
var arrPosition:Number = -1; //tracks where the code is in the picture array
var showpicTime:Number = 5; //number of seconds to display the pic between fades
var tweenTime:Number = 2; //number of seconds to complete tween
var initialImage:Boolean = true; //used in onLoadInit for first image

/* 	The picloaded property lets the app know that the next image has been fully loaded.
	I do this so the fade will not begin before the next image is ready. 
	This is toggled to true in the mcListener.onloadInit function and then
	to false again when a new image is being loaded. */
pic1.picLoaded = false; 
pic2.picLoaded = false;

//make both images invisible to start with so the initial image can be faded in.
pic1._alpha = pic2._alpha = 0; 

//Create a loader to manage the image loading process
var mcLoader:MovieClipLoader = new MovieClipLoader();
var mcListener:Object = new Object();
mcLoader.addListener(mcListener);

/*	This function will fire whenever an image is fully loaded.
	It sets the picLoaded flag to true so the app knows it's ok to start the cross-fade */
mcListener.onLoadInit = function(mc:MovieClip) {
	mc._parent.picLoaded = true; 	//Let app know image has been loaded
	mc._x=887/2-mc._width/2;
	//If this is the first image then tween it in gracefully and 
	//start an interval which will cause the crossfade function to fire	
	//every 'showpicTime' seconds 
	if (initialImage) {
		initialImage = false;
		var firstTween = new Tween(pic1, "_alpha", Regular.easeIn, 0, 100 , tweenTime, true);
		picInt = setInterval(crossfade,showpicTime*1000);
	};
	
};

//Load the initial first image
mcLoader.loadClip(imagePath + picArray[++arrPosition][0],pic1.image_mc);
source1.text = picArray[arrPosition][1];
owner1.text =  picArray[arrPosition][2];

/* 	This one gets a bit tricky. You may think that you can simply place
	getURL(picArray[arrPosition][3],"_blank"); in the onRelease code but you can't.
	The reason is that the 'arrPosition' variable will evaluate to the the next
	image's value by the time the function fires so you would always be loading 
	the next image's link. By assigning 'link' as a property to the button, I
	ensure that it will be correct. Don't believe me? Try it out! */
button1.link = picArray[arrPosition][3];
button1.onRelease = function() {
	getURL(this.link,"_blank");
}

//Load the initial second image (the crossfade function is used to load all subsequent images)
mcLoader.loadClip(imagePath + picArray[++arrPosition][0],pic2.image_mc);
source2.text = picArray[arrPosition][1];
owner2.text =  picArray[arrPosition][2];
button2.link = picArray[arrPosition][3];
button2.onRelease = function() {
	getURL(this.link,"_blank");
}

//The crossfade function takes care of all crossfade functionality after the initial image is faded in
//It's called using setInterval which is defined in the mcListener.onLoadInit function above
function crossfade() {
	//if current clip = pic1 fade in pic2 and vice-versa
	if (currClip == pic1 && pic2.picLoaded) {
		var tween1:Tween = new Tween(pic2, "_alpha", Regular.easeIn, 0, 100 , tweenTime, true);
		var tween2:Tween = new Tween(pic1, "_alpha", Regular.easeIn, 100, 0 , tweenTime, true);
		//loop back to the first image after hitting the end
		if(++arrPosition >= picArray.length) {arrPosition = 0;}
		tween2.onMotionFinished = function() {
			button2._visible = true;
			button1._visible = false;
			pic1.picLoaded = false;
			mcLoader.loadClip(imagePath + picArray[arrPosition][0],pic1.image_mc);
			//set the image attributes
			source1.text = picArray[arrPosition][1];
			owner1.text =  picArray[arrPosition][2];
			button1.link = picArray[arrPosition][3];
			button1.onRelease = function() {
				getURL(this.link,"_blank");
			};
		};
		currClip = pic2;
	} else {
		if(pic2.picLoaded) {
			var tween1 = new Tween(pic1, "_alpha", Regular.easeIn, 0, 100 , tweenTime, true);
			var tween2 = new Tween(pic2, "_alpha", Regular.easeIn, 100, 0 , tweenTime, true);
			if(++arrPosition >= picArray.length) {arrPosition = 0;}
			tween2.onMotionFinished = function() {
				button1._visible = true;
				button2._visible = false;
				pic2.picLoaded = false;
				mcLoader.loadClip(imagePath + picArray[arrPosition][0],pic2.image_mc);
				source2.text = picArray[arrPosition][1];
				owner2.text =  picArray[arrPosition][2];
				button2.link = picArray[arrPosition][3];
				button2.onRelease = function() {
					getURL(this.link,"_blank");
				};
			};
			currClip = pic1;
		};
	};
};

Open in new window

0
merchantweb
Asked:
merchantweb
  • 4
  • 2
1 Solution
 
blue-genieCommented:
you should be able to get the desired effect by fiddling here

  var tween1:Tween = new Tween(pic2, "_alpha", Regular.easeIn, 0, 100 , tweenTime, true);
                var tween2:Tween = new Tween(pic1, "_alpha", Regular.easeIn, 100, 0 , tweenTime, true);


currently as you tween one out you're tweening the other in.

and you have tween2.onMotionFinished (which is the fade out one)
so wait till that is called (i.e gone to black) before calling tween1.

0
 
merchantwebAuthor Commented:
Thanks you blue-genie for your support. I had suspected that might be the snippet to modify, however, I am new to actionscripting and am not sure as to how to edit the code to get the desired effect. I know I need to tell it to fade to black then start the fade in. How would I go about this? Again, thank you so much for your help!
0
 
blue-genieCommented:
as i said in my first post, comment out Tween1 line of code

then in your tween2.onMotionFinished method
paste the Tween1 line of code

try that - should work.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
merchantwebAuthor Commented:
Ok, I'll try that. Thank you!
0
 
merchantwebAuthor Commented:
Thanks!
0
 
merchantwebAuthor Commented:
Thanks blue-genie, that worked!

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now