# Diagonal, transitional fading grid|please help I'm new! :)

**URL:** <https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525>\
**Category:** Uncategorized\
**Created:** [September 17, 2004, 4:24am UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525 "2004-09-17T04:24:08Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Samurai](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@Samurai](https://forum.kirupa.com/u/Samurai)\
**Post date:** [September 17, 2004, 4:24am UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/1 "2004-09-17T04:24:08Z")

</div>

Hi Everyone,

```
 I was wondering if anyone could help me create this:

```

[http://www.kirupa.com/developer/mx/fadegrid.htm](http://www.kirupa.com/developer/mx/fadegrid.htm)

but instead of the grid fading horizontally or vertically, have the grid fade diagonally, or have it fade corner square, then left square beside it and top square above it (corner square) at the same time, then the ones beside those etc. as transition for the image below it, for a screen saver (5 or 6 images in a row) I couldn’t find an example of what I’m talking about sorry. Also I was wondering if this diagonal grid (assuming it can be done) can be done with other shapes (instead of squares).

Thanks to all who decided to help out 🙂

Thanks a mill!

Samurai

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 17, 2004, 9:17am UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/2 "2004-09-17T09:17:12Z")

</div>

Hi Samurai,

The tricky part in what you’re trying to do is that you need to figure out which sqare you have to fade out next. In Voets tute, it’s quite simple because you’re just fading the next one in the sequence:

```auto
mcnr += 1;
fadeOut(mcnr, speed);

```

In your case, you need to find a way to replace the mcnr += 1 with a calculation that will determine the next square in the diagonal for any item in your grid. Which is not easy 🙂

I’m trying to get a formula but it’s quite difficult 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2004, 6:12pm UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/3 "2004-09-18T18:12:05Z")

</div>

wow, ya that sounds pretty tricky, especially for a novice as-er like myself. I wonder how you could do that? is there a way of defining which axis you want to add the 1 to and then alternate it i suppose? but then you have to add the squares that are diagonal from the corner square, hmm, ya this is very very tricky.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2004, 6:21pm UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/4 "2004-09-18T18:21:08Z")

</div>

I remember having done this before using an algorithm to fill an array, then fade the array in that order … I can’t remember the algorithm though. I think it’s posted somewhere on this forum, I think claudio also had a solution for this (or maybe I’m confusing it with the random fading … my memory is one huge gap).

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 19, 2004, 8:10am UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/5 "2004-09-19T08:10:44Z")

</div>

Heres a way you can do it.Use the first file to create the grid you want, then press the squares in the order that you want them to fade in.Then press the button at the top and copy the array.push() values into the second file.  
Not as elegant as a Voetsjoeba type solution but easy to get exactly the effect you want.  
[http://www.gifsrus.com/testfile/g1a.swf](http://www.gifsrus.com/testfile/g1a.swf)  
[http://www.gifsrus.com/testfile/g2a.swf](http://www.gifsrus.com/testfile/g2a.swf)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 20, 2004, 9:46am UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/6 "2004-09-20T09:46:07Z")

</div>

i stringy…how i’m gonna apply ur code if i gonna using 2 button and load different pic to container…let’s say i create container and load the pic into container and start masking with ur code to reveal the pic…hope u clear…am i in the rite path…

tq…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 20, 2004, 12:53pm UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/7 "2004-09-20T12:53:30Z")

</div>

> [@pixeldude](#):
>
> i stringy…how i’m gonna apply ur code if i gonna using 2 button and load different pic to container…let’s say i create container and load the pic into container and start masking with ur code to reveal the pic…hope u clear…am i in the rite path…
> 
> tq…

Yes, sounds like you are on the right lines. You have to make sure that it is fully loaded before masking so set up a loop to check getBytesLoaded()/getBytestotal() and then use the code i commented out in the file  
mc.setMask(paper)  
i=0  
function create(){  
myclip =paper.attachMovie(“mc”,“mc”+i,i)  
myclip.ivar = i  
myclip.\_x=myArray[myclip.ivar][0]  
myclip.\_y=myArray[myclip.ivar][1]  
i++  
if(i\>=myArray.length){  
clearInterval(myInterval)  
}  
}  
myinterval = setInterval(create,50)

I`ve attached a file which will make the first part of the exercise easier than the file i zipped.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 20, 2004, 5:27pm UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/8 "2004-09-20T17:27:29Z")

</div>

that’s awesome stringy!!! 🙂 thanks a bunch!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 20, 2004, 6:25pm UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/9 "2004-09-20T18:25:24Z")

</div>

> [@Samurai](#):
>
> that’s awesome stringy!!! 🙂 thanks a bunch!

you are welcome

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 21, 2004, 1:05am UTC](https://forum.kirupa.com/t/diagonal-transitional-fading-grid-please-help-im-new/64525/10 "2004-09-21T01:05:51Z")

</div>

thanks for the file stringy…anything i’ll let u know!!..