Hi everyone,
The navigation system in this site is set up in such a way that thumbs move around as you click on each one. Also the first thumb flashes a different color as it loads. Any help in figuring out how to achieve this would be greately appreciated.
what do you mean by
“thumbs move around as you click on each one”
Sandman9
on first look. **** !!
Thats one cool effect.
How to do it ? hmmm… well i think you need to prepare some arrays to store locations of the thumbnails. then on click of one you need to prepare a new array with new random positions.
then how the delayed movement takes place ? hmmm…
on second look. **** !!!
on first look. **** !!
Thats one cool effect.
How to do it ? hmmm… well i think you need to prepare some arrays to store locations of the thumbnails. then on click of one you need to prepare a new array with new random positions.
then how the delayed movement takes place ? hmmm…
on second look. **** !!!
Ive seen this on another site, posted on kirupa!!
Goes off to look again…
By the way, if this post is not clear enough, the effect is for the gallery and brides links on the right hand side of the stage.
Any more thought on this gallery? I’m sure some of you guys can help me with it. Thanks
Something like it here… dunno if this is the other site you were thinking of…
Yes. Another example. I like the first one better though.
http://www.kirupa.com/developer/mx/random_motionMX.htm
This tutorial might at least help get you started.
:hr:
Just done this very quickly, nowhere near as complex as the one you features but might give you a start
The values i push into the array just come from creating a grid in another file and then running a trace on each _x,_y value
trace(“myArray.push([”+ma+"])")
where ma is an array [_x,_y]
EDIT/
just tidied it up(a bit)
http://www.gifsrus.com/testfile/gridbuttons.swf
They look heavily inspired by the site below from back in 2002.
The original and recently updated:
http://www.eccentris.com/splash.htm
This one is even more complex as you can see the image on mouseover and you can see which image you have visited.
ello stringy …i just curious how i’m gonna put in ur code if i wanna apply to each button to load a pic…let’s say pic1.jpg, pic2.jpg and the rest…is it i have to put in array also…
still blurrrr…
@stringy, nice one=)
scotty(-:
No you dont. Ive included the code on this and also numbered the mc`s.(mine starts with pic0.jpg -if you want to start with 1 either alter the loops or add 1 to each value of k)
Thanks Scotty.
tq stringy for the fla…i just look at to ur fla…which part in ur code if i have to change if i wanna move the all the button a little bit to the right side…and when i click the button to load the pic it’s seem’s nothing was load at all…so i don’t know what’s wrong…
ur help would be greatful…stringy…tq
I should think there is an array that contains all the possible locations a square could be placed. Then, every so often, or when you click on something, a script selects a random number between zero and the amount of values in the array. It then gradually moves a square to that position.
It might actually be an associative array that also contains whether or not a position is currently occupied by another square.
Either way, that’s how it’s done.
Not sure what you are doing wrong with the loading becuase it works fine for me as it stands.
If you want to keep my grid arrangement but just move it over to the right use something like this
for (var j = 0; j<myArray.length; j++) {
myArray[j][0] += 50;
}
just after the last element of the array has been defined.
You`ll have to drag the background over manually.
EDIT/
Rather than use this, if you take the time to have a look at Scottys grid code posted below and play about with the variables you`ll be in a much better position to make the exact effect you are looking for.
Or replace the definition of the array with this
myArray = new Array();
var startX = 50;//xposition to start
var startY = 50;//yposition to start
var columns = 4;
var rows = 6;
var newX = startX+(columns-1)*30;
var newY = startY+(rows-1)*30;
for (var y = startY; y<=newY; y += 30) {
for (var x = startX; x<=newX; x += 30) {
myArray.push([x, y]);
}
}
scotty(-:
nice work stringy, scotty.
some improvements to this gallery would be nice if you guys find some time:
once you view an image, you can not see it again. I guess because thumb nails are not buttons.
2- easing on the image as it comes to the view.
3-shuffling the thumbs could use some easing too.
finally, for people like me commenting the code would be great.
thank you so much for your efforts.
