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

Hi Everyone,

 I was wondering if anyone could help me create this:

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 :slight_smile:

Thanks a mill!

Samurai

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:

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 :slight_smile:

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

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.

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).

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/g2a.swf

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.

that’s awesome stringy!!! :slight_smile: thanks a bunch!

you are welcome

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