Transition of alpha via Action Script

[asmodias vise]

this isnt a direct problem but i saw a post where suprabreena mentioned using scripts for alpha commands and movement. this is something im not very aware of but would like to know more about, so heres my question, when using a script such as "this" do you only need to put the image in one frame of your layer? say frame 1, and then add the action to that frame alone? also if you could give some examples of what actions you would use to do different things such as motion tweens and alpha fades and so forth and how they work in summary it would help alot. file size is perhaps the one thing i battle more than anything else
thanks.

[upuaut8]

There are a couple of ways of doing this. Usually one is trying to move an object in a fluid motion.. you'll have to set up a loop to do this.

I'd suggest this to play with first.

Create a movieclip and call it controler. Put nothing inside it.
Drag it from the library to the main stage. Click on it once, if it is not currently selected.
Open up your Action panel.

type in

onClipEvent (load) {
trip = 0;
counter = 0;
}
onClipEvent (enterFrame) {
if (trip==0) {
counter=counter+5;
}
if (trip==1) {
counter=counter-5;
}
setProperty ("_root.circle", _alpha, counter);
if (counter==100) {
trip = 1;
}
if (counter==0) {
trip = 0;
}
}

Now place a circle on the main stage, and make it into a movieClip. Open the instance panel and name it "circle". <~very important!!!

Try out your movie the circle should fade in and out.

Other things can be done by changing the Property, from Alpha to something else. Try playing around with it.

This example runs 448 bits.. that's less than 1k

[suprabeener]

one of the lovely things about the flash 5 dot syntax, is that you can access properties of objects in that way, thus doing away with clunky functions like setProperty();

another marvel is "this", which will refer to the relative root from wherever the code is.

perhaps not so clear - here's another version of the fading code rewritten using both these techniques:

onClipEvent(enterFrame){
if (this._alpha == 100) {
diff = -5;
} else if (this._alpha == 0) {
diff = 5;
}
this._alpha += diff;
}

because this code is in "circle", "this" refers to "circle". now we needn't name our movie (unless we refer to it from elsewhere), and setting the _alpha property is nice and neat like this too, n'est pas?

this will cause the circle to be initially visible and fade out then in then out ... if you want it to fade in first, make this._alpha=0 in and onClipEvent(load); event.

edited to add whitespace, i hate that this message board removes it.

arrgh. adding a character at the beginning of the line didn't help! >: (

any solutions? it will make code so much more legible.

[ilyaslamasse]

There have been some lovely alternatives on the forum. Here it goes :
Patola : onClipEvent (enterFrame)

{

if (this._alpha >= 100)

{

diff = -5;

}

if (this._alpha <= 0)

{

diff = +5;

}

this._alpha += diff;

}Thoriphes : onClipEvent(load) {

diff = 5;

}

onClipEvent(enterFrame) {

if (_alpha >= 100 || _alpha <= 0) {

diff = -diff;

}

_alpha += diff;

}Supra : onClipEvent(enterFrame){

_alpha = Math.abs(-100+(a+=5)%200);

}Eyez also explained that % is the modulo operator, results in the remainder of any two numbers.
Example: 10%2 returns 0,
10%3 returns 1..

Very usefull to determine if a number is even or odd: number%2 is 0 when it's even.

Just use trace (number%another number) and check the result.pom 0]

[upuaut8]

Thanks for Cliping this in here POM.. I was just about to do that.. :) (He beat me to it.. he must be bucking for a promotion.. I'll have to sabotage him with the boss. Muhahaha)

[ilyaslamasse]

Hey, Upu, you're not supposed to post here !! Did you see that, Boss ??

pom 0]

[chris]

Hi all,
is it possible to use the above code from upuaut8 but have it so once it fades up and back down it stops so that another image can fade in in place of it, kind of like a slide show.
:bandit:

[lostinbeta]

Here ya go... with an MX update...

MovieClip.prototype.fade = function(minAlpha, maxAlpha, speed) {
this.onEnterFrame = function() {
if (!this.trigger) {
this._alpha -= speed;
if (this._alpha<=minAlpha) {
this._alpha = minAlpha;
this.trigger = true;
}
} else if (this.trigger) {
this._alpha += speed;
if (this._alpha>=maxAlpha) {
this._alpha = maxAlpha;
this.trigger = false;
}
}
};
};
clipToFade.fade(0, 100, 5);

[chris]

Thankx lostinbeta,
I tried this using MX but nothing is happening at all now. I can't understand if I need to name the instance (I can't see any root name).

I have MX but I stiil favour Flash 5 as I'm still finding my way around the MX.:bandit:

[lostinbeta]

clipToFade is the instance name you will need to target.

I never tried Flash 5, but from what I hear, MX beats it out hands down.

[chris]

Strewth that was a fast reply,
Okay i'm probably being really thick this morning but this is what i've done, I made a shape into a movie clip, typed clipToFade into the instance name and copied and pasted your code but still nothing, I know i'm probably missing something really simple here but I can't understand what.:bandit:

[lostinbeta]

It works for me. It just fades a clip in and out, I know you said like a slideshow, but I figured that would be a point in the right direction.

Heres an example file...

[chris]

Hey lostinbeta,
I tried this and it still didn't work so I shut down my computer and restarted it and it works fine, thanks but as it fades in and fades out where in the code would I place the stop action to stop it repeating.
I know i'm being a pain but I appreciate the help

[lostinbeta]

to stop the fading you can use delete this.onEnterFrame in the prototype. What exactly are you trying to do? Are you trying to make a slide show? If so have you seen this?

http://www.kirupa.com/developer/mx/photogallery.htm

[chris]

Hi lostinbeta,
that was perfect for me and it worked fine, thanks a lot for that youve been a great help.:bandit:

[lostinbeta]

I am glad I could help :)

[543312]

Hi, lostinbeta:

can you modify that photo gallery (http://www.kirupa.com/developer/mx/photogallery.htm) so instead of click arrows for next photos, it just automatically externally loads in JPGs every 5 seconds (and each one fade in and out once)? That would be a true slideshow, and I believe you can make it.

Thanks

[lostinbeta]

Sure, add this to the very end of the script...

function nextUp() {
changePhoto(1);
}
setInterval(nextUp, 5000);

And remove your buttons and this script this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);if you just want it to be a slide show, otherwise people will still be able to go back and forth on their own via the arrow keys or the buttons on your stage.

[543312]

Hi, lostinbeta:

This work like charm! You must be a very good scripter because I saw other had to use many line of code to get the same effect while your simple 3 lines would do the trick.

Just adding a little spice: Is it possible to randomly load in JPGs without messing with those code??

I tried adding in following code below "this.pIndex=0;":

function randomPhoto() {
randomNumber = random (this.pathToPics+this.pArray.length);
loadMovie(this.pathToPics+this.pArray[randomNumber], _root.photo);
}

randomPhoto ();


Well, it does not randomly load. always the same photo (pea****) first.


Thanks a again.

[lostinbeta]

The easiest way to do this would be to randomize the array itself and not randomize it's selection of images.

There is no default method to randomize an array in Flash (although there should be!), so we will have to create one.

Add this at the beginning of all the code...Array.prototype.randomize = function() {
var arrayLength = this.length;
var randNum, tempArray;
for (i=0; i<arrayLength; i++) {
randNum = Math.floor(Math.random()*arrayLength);
tempArray = this[i];
this[i] = this[randNum];
this[randNum] = tempArray;
}
};

And then right after the declaration of the "this.pArray" array (contains the list of images to load) add this line.. this.pArray.randomize();

Tah dah, each time this loads the images will be random.

[543312]

Wow!
Randomize an array---That's a very smart move--never thought about it.
It works wonderful and you are my hero.
Many thanks!

p.s. why do you call yourself "failed scripter"?

[lostinbeta]

Glad everything works out for ya ;)

And I call myself "failed scripter" because... uhhh... I don't know :P

[543312]

Hi, Lostinbeta:

Knock, knock again. but I hope you do not see me as a pain....

These photos in the gallary is relatively small. If all those images are large sized, say 750 by 420, resulting 900K+ for each image, should I concern about preloader? A preloader loads all images before the movie performs(auto run every 5 seconds, fade in and out...)?
Please see:
http://www.kirupaforum.com/forums/showthread.php?s=&threadid=25488

Do I need it?
If yes, how do I insert them into the code you helped developed so far??

Thanks, you are my only help.

[lostinbeta]

The code already has a built in preloader ;)

You just have to edit it to do what you want.

MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};



NOTE: I posted that to help you find it in the script, THIS CODE ALREADY EXISTS IN THE SCRIPT, just making sure you don't add it twice ;)

[543312]

I did look at above code, and wondered whether it's preloader or not, or good enough for handling the larger image....

Thanks a ton, Lostinbeta! you guy rocks!

[lostinbeta]

;) no problem.

[543312]

Hi, LostinBeta:

I am quite happy with what I've been helped on this photo gallery so far. But I have my butts kicked by someone who want to add in captioning for each photo and a photo number indicator. I tried and tried and appearantly I am not good enough to pull it out. So I have no where to turn to but you.:*(

1. caption for each photo:
I made text file named "animation.txt" with "&image1= this is pea****, &image2=this is elephant, &image3..............." and I put a dynamic text field with instance name of "caption".

I put this on top of all the code:
"LoadVariablesNum("animation.txt", 0);"
then I put under "LoadMovie(this.pathtoPics + this.pArray.........":
"caption.text=eval(this.pArray[0]);"

The text field shows nothing. what is the correct code to make caption.text display the right text for each photo displayed?

2. photo number indicator:
for each photo displayed, it will show : 1 of 10, 2 of 10, 3 of 10......
I have 2 text fields with instance names of "currentNum" and "totalNum". Then at the very end of all the code I put:
"currentNum.text=this.pIndex;
totalNum.text=this.pArray.length;"

well, I got totalNum display the correct number, but the currentNum always stay at "1", no matter how photo has been changed. I guess I missed something, but I could not figure it out. (note: the original file start with image0, for this purpose I want to start with image1, so I changed "this.pIndex=0" to "this.pIndex=1").

Thanks again, Lostinbeta!

[jillymo]

Hi LIB-
Someone referred me to this thread as a source for using AS to alpha some bitmap images in a fla I am working on. Well I downloaded the fadetest.fla and it works great.
I was just wondering how to go the opposite way on this- to take an image that is set to alpha 0 and then fade it in.
:bounce:

[ivey]

Hi there -

This is really great!

I'm just not sure about where the "delete this.onEnterFrame" goes in order to make it not repete -

Can you help?

Thanks!!!

Here ya go... with an MX update...

MovieClip.prototype.fade = function(minAlpha, maxAlpha, speed) {
this.onEnterFrame = function() {
if (!this.trigger) {
this._alpha -= speed;
if (this._alpha<=minAlpha) {
this._alpha = minAlpha;
this.trigger = true;
}
} else if (this.trigger) {
this._alpha += speed;
if (this._alpha>=maxAlpha) {
this._alpha = maxAlpha;
this.trigger = false;
}
}
};
};
clipToFade.fade(0, 100, 5);

[solenbaum]

How would I modify the following code to work on a button? I want the button to fade out on rollover, and fade back on rollout.

MovieClip.prototype.fade = function(minAlpha, maxAlpha, speed) {
this.onEnterFrame = function() {
if (!this.trigger) {
this._alpha -= speed;
if (this._alpha<=minAlpha) {
this._alpha = minAlpha;
this.trigger = true;
}
} else if (this.trigger) {
this._alpha += speed;
if (this._alpha>=maxAlpha) {
this._alpha = maxAlpha;
this.trigger = false;
}
}
};
};
clipToFade.fade(0, 100, 5);

[D.shaks]

Although this is new, it can still be quite a pain to setup. But, it does have potential as far as I could see.