Groups | Blog | Home
all groups > flash (macromedia) > december 2003 >

flash (macromedia) : image fade


secret_ident
12/19/2003 11:37:20 PM
does anyone here know how to make an image fade?

Daniel T.
Cell: 426-6247
email: secret_ident101@hotmail.com
Bill Somerville
12/20/2003 2:11:18 AM
I see by your member information that you have 18 or so posts.
By now you should know how to use the search ability of this forum.
You could have saved yourself some time and obtained your answer right away by simply searching
for image fade.
This question has been answered quite well several times before.


Jack.
12/20/2003 1:50:10 PM
many answers to this deal with fading the image .. very CPU intensive,
this method fades a movieclip that covers the image ..
it is suited to images of the same size (non progressive format jpegs)

arr=["pic0","pic1","pic2","pic3","pic4"];
coord=[200,150,200,100,275,150];
/**************/
createEmptyMovieClip("mask",124);
with(mask){
lineStyle(1,0x000000,0); beginFill(0xFFFFFF);
lineTo(coord[0],0); lineTo(coord[0],coord[1]);
lineTo(0,coord[1]); lineTo(0,0);
_x=coord[2]; _y=coord[3]; endFill();
}
/**************/
function fader(dir){
if(dir){
createEmptyMovieClip("loadr",123);
loadr.loadMovie(arr[pic]+".jpg");
loadr._x = coord[4]; loadr._y = coord[5];
pic++;
mask.onEnterframe = function(){ maskDn();
pic > arr.length-1 ? pic=0 : null; };
}else
mask.onEnterframe = function(){ maskUp();};
};
/**************/
function maskUp(){
mask._alpha += 5;
if(mask._alpha > 100){
mask._alpha = 100; timer = 0; fader(1);}
};
/**************/
function maskDn(){
mask._alpha -= 1;
if(mask._alpha < 0){ mask._alpha = 0; hold(2000);}
if(timer) fader(0);
};
/**************/
function hold(mSecs){
if(!pause){
pause = getTimer() + mSecs;
} else if (getTimer() > pause){
pause = 0; timer = 1;
}
};
/* initialize */
pic=0; fader("dn");


another one for the search archives :)
hth

regards
Jack.
12/20/2003 2:32:03 PM
modified to accept any size of image (tested with 600x300 jpg)
and place on centre,

arr=["image04","pic0","example_cover","pic2","pic3"];
coord=[600,300,10,10];
/**************/
createEmptyMovieClip("mask",124);
with(mask){
lineStyle(1,0x000000,10); beginFill(0xFFFFFF);
lineTo(coord[0],0); lineTo(coord[0],coord[1]);
lineTo(0,coord[1]); lineTo(0,0);
_x=coord[2]; _y=coord[3]; endFill();
}
/**************/
function fader(dir){
if(dir){ loadJPG(pic); pic++;
mask.onEnterframe = function(){ maskDn();
pic > arr.length-1 ? pic=0 : null; };
}else
mask.onEnterframe = function(){ maskUp();};
};
/**************/
function maskUp(){
mask._alpha += 5;
if(mask._alpha > 100){
mask._alpha = 100; timer = 0; fader(1);}
};
/**************/
function maskDn(){
mask._alpha -= 1;
if(mask._alpha < 0){ mask._alpha = 0; hold(2000);}
if(timer) fader(0);
};
/**************/
function hold(mSecs){
if(!pause){
pause = getTimer() + mSecs;
} else if (getTimer() > pause){
pause = 0; timer = 1;
}
};
/**************/
function loadJPG(pic){
createEmptyMovieClip("loadr",123);
loadr.loadMovie(arr[pic]+".jpg");
this.onEnterFrame = function(){
if(loadr._width > 0){
loadr._x = mask._x+(mask._width/2)-(loadr._width/2);
loadr._y = mask._y+(mask._height/2)-(loadr._height/2);
loadr.onRollOver = function(){trace(arr[pic]);};
delete this.onEnterFrame;
}
};
};
/* initialize */
pic=0; fader("dn");

Happy Holidays to all :)


regards
jmack007
12/20/2003 5:29:41 PM
The earlier post is, indeed, a good technique for creating a function that can read dimensions of any image and modular-style fade the images.

An easier way is this if the more complex is unnecessary or out of depth:

Put the image you want to fade onto the stage in a keyframe. Turn it into a movie clip.
Insert another keyframe further ahead on the timeline (ie: the image is on frame 20, put the second keyframe on frame 39)

Select the image movie clip in the first keyframe and put a bit of actionscript upon it (NOT in the frame itself-- actually ON the movie clip to fade.)

onClipEvent (enterFrame) {

// over the next 19 frames do a fade out of this movie clip image.
setProperty(this, _alpha, _alpha-=10);

}

To fade in reverse it a bit:

onClipEvent (enterFrame) {

// over the next 19 frames do a fade out of this movie clip image.
setProperty(this, _alpha, _alpha+=10);

}


To tie to a button event give the mc a name and label your first keyframe something like 'imageIn'.

on (press) {

_root.gotoAndPlay("imageIn");

}

Once the playhead goes to the labeled frame it will read the code on the movie clip and autoplay the frames necessary to fade it out or in.

--jmac



MarkRRummel
6/26/2004 9:55:36 PM
Ok I am quite sorry to ask such a noob question but what do I so with the code? Where does it go? I just got Flash and have no clue. Sorry Again.

AddThis Social Bookmark Button