Fading effect with six images

  • plumbum01
  • Newbie
  • Newbie
  • plumbum01
  • Posts: 12

Post 3+ Months Ago

Hello everyone! I'm new in this board and even in actionscripting, but I have a problem and I hope you guys will help me.
I need to do this animation, but i have problem with fade in and fade out.
http://www.verus.lt/images/main.swf
As you can see:
1. first image in the first column fades out
2. second image fades in, and waits till the second image in the third column fades in
3. first image in the second column fades out........ect

I think that I must use functions and setInterval, but nothing happens...:(
So I think, you will understand everything, what i wanted to say...
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

You don't have to use functions, for/next loops, if statements, _alpha properties or setInterval, but it sure would help.

;)

I don't understand what your question is. This is a VERY simple thing to accomplish. Where are you stuck? Please be more specific.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Here's one way to pull it off,
CrossFade
Feel free to point out anything you don't understand :)

FLA Source (MX not 2004) with images in library
// edit :oops: had the wrong link.
Code: [ Select ]
//Prototype for individual fade
MovieClip.prototype.fadeTo = function(value,speed){ //alpha value to fade to, speed to fade it
    this.onEnterFrame = function() {
        this.aV = Math.floor(value-this._alpha);
        this.aV ? this._alpha += this.aV/speed : (this._alpha=value, delete this.onEnterFrame);
  }
}
//Prototype to apply fade prototype to both mC's inside the mC
MovieClip.prototype.crossFade = function(a_,b_){ //takes two objects with v,s as attributes for each
    this.a.fadeTo(a_.v, a_.s);
    this.b.fadeTo(b_.v, b_.s);
}
/*Create some containers & attach the properly linked image mC's to them from the library*/
for(i=1; i<4; i++){
    createEmptyMovieClip("box"+i,i);
    this["box"+i].attachMovie(("p"+i),"a",0);
    this["box"+i].attachMovie(("p"+(i+3)),"b",1);
}
/*Place them at the proper cords on the stage, & declare box#.b._alpha=0 cause it's easier to do it here :P (ok this could be added to for loop but I don't feel like editing it right now :P )*/
box1._x=10; box1._y=10; box1.b._alpha=0;
box2._x=210; box2._y=10; box2.b._alpha=0;
box3._x=410; box3._y=10;box3.b._alpha=0;
/*create a "yin-yang" array with two objects for fade params, this array will have the first element shifted to the end of the array in the last frame to achieve alternating fades*/
settings = [{v:0, s:10}, {v:100, s: 20}];
  1. //Prototype for individual fade
  2. MovieClip.prototype.fadeTo = function(value,speed){ //alpha value to fade to, speed to fade it
  3.     this.onEnterFrame = function() {
  4.         this.aV = Math.floor(value-this._alpha);
  5.         this.aV ? this._alpha += this.aV/speed : (this._alpha=value, delete this.onEnterFrame);
  6.   }
  7. }
  8. //Prototype to apply fade prototype to both mC's inside the mC
  9. MovieClip.prototype.crossFade = function(a_,b_){ //takes two objects with v,s as attributes for each
  10.     this.a.fadeTo(a_.v, a_.s);
  11.     this.b.fadeTo(b_.v, b_.s);
  12. }
  13. /*Create some containers & attach the properly linked image mC's to them from the library*/
  14. for(i=1; i<4; i++){
  15.     createEmptyMovieClip("box"+i,i);
  16.     this["box"+i].attachMovie(("p"+i),"a",0);
  17.     this["box"+i].attachMovie(("p"+(i+3)),"b",1);
  18. }
  19. /*Place them at the proper cords on the stage, & declare box#.b._alpha=0 cause it's easier to do it here :P (ok this could be added to for loop but I don't feel like editing it right now :P )*/
  20. box1._x=10; box1._y=10; box1.b._alpha=0;
  21. box2._x=210; box2._y=10; box2.b._alpha=0;
  22. box3._x=410; box3._y=10;box3.b._alpha=0;
  23. /*create a "yin-yang" array with two objects for fade params, this array will have the first element shifted to the end of the array in the last frame to achieve alternating fades*/
  24. settings = [{v:0, s:10}, {v:100, s: 20}];


The framerate is set to 20FPS,The first frame contains the above actions is played to initialize everything then is never seen again, starting on frame 2 every 30 frames there is a,
Code: [ Select ]
box#.crossFade(settings[0], settings[1]);

that triggers the a and b mCs inside that boxes container to fade to the oppisite level that it is at now.

in frame 91 there is,
Code: [ Select ]
settings.push(settings.shift());
gotoAndPlay(2);
  1. settings.push(settings.shift());
  2. gotoAndPlay(2);

The first line shift()'s the first settings object out of the settings array & since shift()'ing an array returns the element that it removes, we push() what is returned to the end of the array (hence the yin-yang)

The second line is fairly self explaining :wink: causes the movie to return right back to frame 2 & start over again, this time the values in the settings array are reversed (There is a reverse() method for arrays, This way is good to know though :wink: .oO(ok so I forgot about the reverse method :P ) ) Soooo, now with reversed settings the a & b mCs inside the box# containers will fade in the oppisite directions this time around (and every iteration thereafter)
  • plumbum01
  • Newbie
  • Newbie
  • plumbum01
  • Posts: 12

Post 3+ Months Ago

I forgot to mention, that I import those six images from folder, then automatically resize it using AC :) So I can't use motion tween. Else it would be very simple :wink:
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Where do you see a tween :scratchhead:
  • plumbum01
  • Newbie
  • Newbie
  • plumbum01
  • Posts: 12

Post 3+ Months Ago

joebert: I haven't tried your code yet, but I think, that it won't work properly, because I import images from folder into one frame, and when I use more frames those images loads over..

P.s. That message was dedicated to digitalMedia :)
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

import as in loadMovie() import right ?

Place this inside a new mC, swap the attachMovie() with loadMovie() & play once all images are loaded.

I'd give an example but I can't without seeing how you import the images.

edit// then again, what framerate are you using, might have to adjust some numbers as well
  • plumbum01
  • Newbie
  • Newbie
  • plumbum01
  • Posts: 12

Post 3+ Months Ago

yes, I use loadMovie(). Thank you for helping me joebert :)

AC in the first frame:
Code: [ Select ]
//loading 1_1 picture
foto1_1.onLoad = function() {
 var maxWidth = 100;
 var maxHeight = 100;

 if (this._width>maxWidth || this._height>maxHeight)
 {
  var scaleFactor = this._width>this._height ? maxWidth/this._width : maxHeight/this._height;
  this._width = Math.floor(this._width*scaleFactor);
  this._height = Math.floor(this._height*scaleFactor);
 }
}

foto1_1.onData = function() {
}
foto1_1.loadMovie("flash/1_1.jpg");


And this one in the movieClip named foto1_1:

onClipEvent(data) {
this._width = 162;
this._height = 113;
}
  1. //loading 1_1 picture
  2. foto1_1.onLoad = function() {
  3.  var maxWidth = 100;
  4.  var maxHeight = 100;
  5.  if (this._width>maxWidth || this._height>maxHeight)
  6.  {
  7.   var scaleFactor = this._width>this._height ? maxWidth/this._width : maxHeight/this._height;
  8.   this._width = Math.floor(this._width*scaleFactor);
  9.   this._height = Math.floor(this._height*scaleFactor);
  10.  }
  11. }
  12. foto1_1.onData = function() {
  13. }
  14. foto1_1.loadMovie("flash/1_1.jpg");
  15. And this one in the movieClip named foto1_1:
  16. onClipEvent(data) {
  17. this._width = 162;
  18. this._height = 113;
  19. }
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Is there any interaction with theese movieclips/images Or are they just for animation/show purposes ?
  • plumbum01
  • Newbie
  • Newbie
  • plumbum01
  • Posts: 12

Post 3+ Months Ago

joebert wrote:
Is there any interaction with theese movieclips/images Or are they just for animation/show purposes ?


well just resize and this animation...
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Sorry I'm late, It's been a rough day....

here's a loadMovie version

Here's the source (there's almost as many comments as code :P )

Here's a look at things before opening Flash ;)
This is the first frame of the main timeline, only thing new here is the jpgLoadResize (which should be loadPosition() but I had a brainfart when doing it)
Code: [ Select ]
//Prototype for individual fade
MovieClip.prototype.fadeTo = function(value,speed){//(alpha value to fade to, speed to fade it)
    /* Do this FPS times per second */
    this.onEnterFrame = function() {
        this.aV = Math.floor(value-this._alpha);
        /* if(this.aV == true){ this._alpha += ..... }else{this._alpha=value; & stop doing this */
        this.aV ? this._alpha += this.aV/speed : (this._alpha=value, delete this.onEnterFrame);
  }
}
//Prototype to apply fade prototype to both mC's inside the mC
MovieClip.prototype.crossFade = function(a_,b_){ //takes two objects with v,s as attributes for each
    /* apply fade to containers a & b with the values of the setings array */
    this.a.fadeTo(a_.v, a_.s);
    this.b.fadeTo(b_.v, b_.s);
}
/*Prototype to load JPGs into containers a & b inside the movieclip(or box#) this is applied to. This prototype will apply itself to every box# in the main container untill half of the number of pics in picArray have been reached, then it will tell the container to play() */
MovieClip.prototype.jpgLoadResize = function(pic,pad){/*pic should always be entered as 0, the prototype will increment it on it's own. pad is the number of pixels to add between each movieclip( or box#) */
    this.a.loadMovie(this._parent.picArray[pic]);
    /*container b will load pic+(pics/2) jpg, in other words if there are 6 pics the first call will load 0 into a & 4 into b , second call, 1 into a 5 into b, ect.. when filling picArray put all of the images for a in it then add b's images */
    this.b.loadMovie(this._parent.picArray[(pic+(this._parent.picArray.length/2))]);
    this.onEnterFrame = function(){
        /* since the movieclips/boxes are created dynamically they have a width of 0, if the width is larger than that then we know how wide the image is & can position it accordingly */
        if(this.a._width > 1 && this.b._width > 1){
            /*set the alpha of b so there is no "fishtank time" */
            this.b._alpha=0;
            /* if pic is greater than 0 then we know this is not the first loop so we get the _x & _width of the last container/box processed, add the pad value to that, & place this movieclip/box at that number. else it's the first loop & we place it at pads value */
      pic > 0 ? (this._x = ((this._parent["box"+(pic-1)]._x + this._parent["box"+(pic-1)]._width)+pad)) : (this._x=pad);
            /* if adding 1 to pic is less than the number of images/2 then we re-call this prototype on the next movieclip/box. else tell the main container to play() */
            ((pic+1) < (this._parent.picArray.length/2)) ? this._parent["box"+(pic+1)].jpgLoadResize(pic+1,pad) : this._parent.play();
                        /* well the pics are loaded, we have our container where we want it, & we have shown the next movieclip/box how to follow in our footsteps, time to retire :P */
            delete this.onEnterFrame;
    }
    }
}
  1. //Prototype for individual fade
  2. MovieClip.prototype.fadeTo = function(value,speed){//(alpha value to fade to, speed to fade it)
  3.     /* Do this FPS times per second */
  4.     this.onEnterFrame = function() {
  5.         this.aV = Math.floor(value-this._alpha);
  6.         /* if(this.aV == true){ this._alpha += ..... }else{this._alpha=value; & stop doing this */
  7.         this.aV ? this._alpha += this.aV/speed : (this._alpha=value, delete this.onEnterFrame);
  8.   }
  9. }
  10. //Prototype to apply fade prototype to both mC's inside the mC
  11. MovieClip.prototype.crossFade = function(a_,b_){ //takes two objects with v,s as attributes for each
  12.     /* apply fade to containers a & b with the values of the setings array */
  13.     this.a.fadeTo(a_.v, a_.s);
  14.     this.b.fadeTo(b_.v, b_.s);
  15. }
  16. /*Prototype to load JPGs into containers a & b inside the movieclip(or box#) this is applied to. This prototype will apply itself to every box# in the main container untill half of the number of pics in picArray have been reached, then it will tell the container to play() */
  17. MovieClip.prototype.jpgLoadResize = function(pic,pad){/*pic should always be entered as 0, the prototype will increment it on it's own. pad is the number of pixels to add between each movieclip( or box#) */
  18.     this.a.loadMovie(this._parent.picArray[pic]);
  19.     /*container b will load pic+(pics/2) jpg, in other words if there are 6 pics the first call will load 0 into a & 4 into b , second call, 1 into a 5 into b, ect.. when filling picArray put all of the images for a in it then add b's images */
  20.     this.b.loadMovie(this._parent.picArray[(pic+(this._parent.picArray.length/2))]);
  21.     this.onEnterFrame = function(){
  22.         /* since the movieclips/boxes are created dynamically they have a width of 0, if the width is larger than that then we know how wide the image is & can position it accordingly */
  23.         if(this.a._width > 1 && this.b._width > 1){
  24.             /*set the alpha of b so there is no "fishtank time" */
  25.             this.b._alpha=0;
  26.             /* if pic is greater than 0 then we know this is not the first loop so we get the _x & _width of the last container/box processed, add the pad value to that, & place this movieclip/box at that number. else it's the first loop & we place it at pads value */
  27.       pic > 0 ? (this._x = ((this._parent["box"+(pic-1)]._x + this._parent["box"+(pic-1)]._width)+pad)) : (this._x=pad);
  28.             /* if adding 1 to pic is less than the number of images/2 then we re-call this prototype on the next movieclip/box. else tell the main container to play() */
  29.             ((pic+1) < (this._parent.picArray.length/2)) ? this._parent["box"+(pic+1)].jpgLoadResize(pic+1,pad) : this._parent.play();
  30.                         /* well the pics are loaded, we have our container where we want it, & we have shown the next movieclip/box how to follow in our footsteps, time to retire :P */
  31.             delete this.onEnterFrame;
  32.     }
  33.     }
  34. }


Now to make it easy we create a new symbol with nothing in it but actions that refer to things inside it & use the prototypes from above. (why not put the prototypes inside the stmbol you ask? putting them in the root makes it easier to find them for reference if we have somthing else that wants to use them)

Now in the first keyframe (should be the only one right now ;) ) we have theese actions to set things up.
Code: [ Select ]
/*create a static array full of paths to JPGs, realistically this array would be filled with data from XML, but for examples sake this will do*/
picArray = ["pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg","pic5.jpg","pic6.jpg"];

/*create a "yin-yang" array with two objects for fade params, this array will get reversed ;) to alternate the fades. If you allready have a _global.settings declared from somthing else then make sure you replace this one with somthing else (ie settingsB ) when you need this later, oh yeah change the name here too ;) */
_global.settings = [{v:0, s:10}, {v:100, s: 20}];

/* divide the length of picArray by 2 & create that many containers,
then create containers a & b inside the new container */
for(i=0; i<(picArray.length/2); i++){
    createEmptyMovieClip("box"+i,i);
    this["box"+i].createEmptyMovieClip("a",0);
    this["box"+i].createEmptyMovieClip("b",1);
}
/*From here we have theese objects/paths to work with,
box0 && box0.a && box0.b
box1 && box1.a && box1.b
box2 && box2.a && box2.b
ect..
*/

/* Now start the chain with the jpgLoadResize prototype,
0 being the associative array id for the first container & 10 being the padding between each container */
box0.jpgLoadResize(0,10);

/* Now we stop this movieclip from playing untill the prototype tells it to play */
stop();
  1. /*create a static array full of paths to JPGs, realistically this array would be filled with data from XML, but for examples sake this will do*/
  2. picArray = ["pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg","pic5.jpg","pic6.jpg"];
  3. /*create a "yin-yang" array with two objects for fade params, this array will get reversed ;) to alternate the fades. If you allready have a _global.settings declared from somthing else then make sure you replace this one with somthing else (ie settingsB ) when you need this later, oh yeah change the name here too ;) */
  4. _global.settings = [{v:0, s:10}, {v:100, s: 20}];
  5. /* divide the length of picArray by 2 & create that many containers,
  6. then create containers a & b inside the new container */
  7. for(i=0; i<(picArray.length/2); i++){
  8.     createEmptyMovieClip("box"+i,i);
  9.     this["box"+i].createEmptyMovieClip("a",0);
  10.     this["box"+i].createEmptyMovieClip("b",1);
  11. }
  12. /*From here we have theese objects/paths to work with,
  13. box0 && box0.a && box0.b
  14. box1 && box1.a && box1.b
  15. box2 && box2.a && box2.b
  16. ect..
  17. */
  18. /* Now start the chain with the jpgLoadResize prototype,
  19. 0 being the associative array id for the first container & 10 being the padding between each container */
  20. box0.jpgLoadResize(0,10);
  21. /* Now we stop this movieclip from playing untill the prototype tells it to play */
  22. stop();


Now we insert a new keyframe at frame 2 & give it this bit of code,
Code: [ Select ]
//crossFade box0 (remember the settings2 we talked about ;) )
box0.crossFade(settings[0], settings[1]);
  1. //crossFade box0 (remember the settings2 we talked about ;) )
  2. box0.crossFade(settings[0], settings[1]);


Now for every box that we are going to have we insert a new keyframe 30 frames from the last (31,61) We also need to insert one extra 30 frames from that last one so it doesn't start fading hthe first box right after the last, we will also be reversing the settings array in this last frame.

In each of the keyframes we inserted for the boxes we add the actions above just changing the number appended to the end of the box (box0, box1, box2, ect...)

In the last frame we have the array reversal & the gotoAndPlay(2) actions,
Code: [ Select ]
// reverse the elements in the settings array ;)
_global.settings.reverse();
gotoAndPlay(2);
  1. // reverse the elements in the settings array ;)
  2. _global.settings.reverse();
  3. gotoAndPlay(2);


BTW, this fla is <14KB & the movie compiles to be < 1KB (890 bytes on my machine) :wink:
  • plumbum01
  • Newbie
  • Newbie
  • plumbum01
  • Posts: 12

Post 3+ Months Ago

wow, thank you for your support. I realy apreciate it, but all images you add in array and I don't know how to resize it. You can download my source to see what I mean:
http://dizaino.puslapiai.lt/myFade.rar

Sorry, if my questions are lame, but I'm learning AC :?
  • plumbum01
  • Newbie
  • Newbie
  • plumbum01
  • Posts: 12

Post 3+ Months Ago

joebert: can you tell me how to resize those six pictures and leave 6 px space between them? 'Cause I don't know how to do it when images is added in array. And I really need this thing. Thank you for your help ;)
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Find this line,
Code: [ Select ]
box0.jpgLoadResize(0,10);
change the 10 to a 6. :D DON'T change the 0 (zero)

That 10 is the number of pixels to space between the images, & the amount to space the first image from the 0 _x point of the mc.

As for the resize, grabbing the numbers you have above find this line in the jpgLoadResize( prototype,
Code: [ Select ]
if(this.a._width > 1 && this.b._width > 1){
     /*set the alpha of b so there is no "fishtank time" */
  1. if(this.a._width > 1 && this.b._width > 1){
  2.      /*set the alpha of b so there is no "fishtank time" */


Right after that there is a this.b._alpha=0;
After this alpha line & assuming these will all be the same size, add theese lines,
Code: [ Select ]
this.a._width = 162;
this.a._height = 113;
this.b._width = 162;
this.b._height = 113;
  1. this.a._width = 162;
  2. this.a._height = 113;
  3. this.b._width = 162;
  4. this.b._height = 113;


Im guessing theese are going to be thumbnails ?
  • plumbum01
  • Newbie
  • Newbie
  • plumbum01
  • Posts: 12

Post 3+ Months Ago

Big thank for your help joebert!!! Everything works fine, you saved my ass :lol: Well now i will learn actionscripting from basics and hard that I could do this kind of things by myself, without noones support. Thank you again! :wink:
  • plumbum01
  • Newbie
  • Newbie
  • plumbum01
  • Posts: 12

Post 3+ Months Ago

damn but there is a little bug. With flash is everything fine, but when i publish it (when I add it to html page) it doesn't work. What is a problem?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Weird :? This is the object/embed tag It used when I published it from flash, Works fine for me.
Code: [ Select ]
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="600" HEIGHT="200" id="crossFade2b" ALIGN="">
<PARAM NAME=movie VALUE="crossFade2b.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="crossFade2b.swf" quality=high bgcolor=#FFFFFF WIDTH="600" HEIGHT="200" NAME="crossFade2b" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
  1. <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  2. codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  3. WIDTH="600" HEIGHT="200" id="crossFade2b" ALIGN="">
  4. <PARAM NAME=movie VALUE="crossFade2b.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="crossFade2b.swf" quality=high bgcolor=#FFFFFF WIDTH="600" HEIGHT="200" NAME="crossFade2b" ALIGN=""
  5. TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
  6. </OBJECT>


How are you publishing it ? There might be a conflict between it & another object on the page.

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: No registered users and 6 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.