[rjdejong]

Hey,

I'm looking for a small flash app that can load images preferly externally with some kind of XML document.

I'm looking for something like a 3 by 3 grid where the images fade randomly into another image.

Thanks in advance

[rjdejong]

Hmm no one? Maybe a discription was a bit to vague . Usually Dizi knows where to find these kind of free flash script ^^. looking for something like this

http://www.frenzymed...nten_frenzy.swf

Appreciate any help

Thanks, Greetz, R-J

[Roberto]

Hello

The attachment shows a way to create the effect your after. It loads the pictures via xml and displays them in a 3x3 grid - with the pictures changing at random times to a picture that isn't currently being displayed.

The code is set up to work with what ever stage size you select, but you must(here's the rules):

1. All the images must be the same size, as the pictures are positioned using the width/height of the first picture to load.
2. The width of three pictures cant be wider than the stage width + an the height of three pictures cant be longer than the stage height. You wouldn't want them to be bigger any way - you want to see the ruddy things!

I've made the pictures clickable - they open up an url in a new window when clicked. The url is loaded via the xml. Just lose any code relevent to the url to lose the clicking action. The links will work fine when testing in the Flash IDE or when testing from a server, but flash security settings will not let you link to other pages when testing on a local file. To change the security setting for a trusted file -> go to

http://www.macromedia.com/support/document..._manager04.html

and follow the instructions.


Let me know if you need any of it explained.


Rob

Attached File(s)

•  RandomFade.zip (66.62K)
  Number of downloads: 71

[simonok]

This is just what I'm looking for, but I need more rows, any idea what variables set this?

cheers
Simon

Roberto, on Jul 1 2008, 20:14, said:

Hello

The attachment shows a way to create the effect your after. It loads the pictures via xml and displays them in a 3x3 grid - with the pictures changing at random times to a picture that isn't currently being displayed.

The code is set up to work with what ever stage size you select, but you must(here's the rules):

1. All the images must be the same size, as the pictures are positioned using the width/height of the first picture to load.
2. The width of three pictures cant be wider than the stage width + an the height of three pictures cant be longer than the stage height. You wouldn't want them to be bigger any way - you want to see the ruddy things!

I've made the pictures clickable - they open up an url in a new window when clicked. The url is loaded via the xml. Just lose any code relevent to the url to lose the clicking action. The links will work fine when testing in the Flash IDE or when testing from a server, but flash security settings will not let you link to other pages when testing on a local file. To change the security setting for a trusted file -> go to

http://www.macromedia.com/support/document..._manager04.html

and follow the instructions.


Let me know if you need any of it explained.


Rob

[Roberto]

Hello

You will need to make the following changes:

1. On line 35 change:

for(var i:uint = 0 ; i < 9 ; i++){ You need to add 3 to the 9 for every extra row, so adding 2 extra rows :
for(var i:uint = 0 ; i < 15 ; i++){

2. On line 104 change :

for(var i:uint = 0 ; i < 9 ; i++){ again add 3 to the 9 for every extra row.

3. On line 115 change :

var ySpace:Number = (stage.stageHeight - 3 * picHeight) /4; add 1 to the three + 1 to the four for every extra row, so adding 2 extra rows would be :

var ySpace:Number = (stage.stageHeight - 5 * picHeight) /6; The way to look at it is that 5 is the number of rows + 6 is the number of spaces used to space the rows - 1 at the top and 1 after each row.

4. On line 120 change:

for(var i:uint = 0 ; i < 9 ; i++){ again add 3 to the 9 for every extra row.

5. On line 137 change:

for(var m:uint = 9; m < picNum ; m++){ again add 3 to the 9 for every extra row. This bit sets the alpha of the pictures that are not currently being displayed to 0.

That should work, but make sure the number of pictures linked from the xml is greater than rows x columns.

Rob

[simonok]

Thanks very much for the help, but what its done now is generate a grid 3 accross by 5 down. I would like it to be 4x4 or 5x5 or 10 accross x 3 down. Is that possible, sorry for my stupidity, woudl it be possible to replace the values with a variable called rows, and columns and I suppose a total images variable that you could set at the top of the movie?

* * *
* * *
* * *
* * *
* * *

Roberto, on Sep 25 2008, 20:25, said:

Hello

You will need to make the following changes:

1. On line 35 change:

for(var i:uint = 0 ; i < 9 ; i++){ You need to add 3 to the 9 for every extra row, so adding 2 extra rows :
for(var i:uint = 0 ; i < 15 ; i++){

2. On line 104 change :

for(var i:uint = 0 ; i < 9 ; i++){ again add 3 to the 9 for every extra row.

3. On line 115 change :

var ySpace:Number = (stage.stageHeight - 3 * picHeight) /4; add 1 to the three + 1 to the four for every extra row, so adding 2 extra rows would be :

var ySpace:Number = (stage.stageHeight - 5 * picHeight) /6; The way to look at it is that 5 is the number of rows + 6 is the number of spaces used to space the rows - 1 at the top and 1 after each row.

4. On line 120 change:

for(var i:uint = 0 ; i < 9 ; i++){ again add 3 to the 9 for every extra row.

5. On line 137 change:

for(var m:uint = 9; m < picNum ; m++){ again add 3 to the 9 for every extra row. This bit sets the alpha of the pictures that are not currently being displayed to 0.

That should work, but make sure the number of pictures linked from the xml is greater than rows x columns.

Rob

[Roberto]

Hello

This version can have as many rows/columns as you want, but you must have more pictures in your xml than rows x columns. You alter the number of rows/columns on lines 32 + 33 :

var rows:uint = 3;
var cols:uint = 3;
var total:uint = rows * cols;


Rob

Attached File(s)

•  RandomFade2.zip (65.64K)
  Number of downloads: 48

[simonok]

Wow, superb, thanks very much rob, that's really fantastic.

Roberto, on Sep 26 2008, 10:58, said:

Hello

This version can have as many rows/columns as you want, but you must have more pictures in your xml than rows x columns. You alter the number of rows/columns on lines 32 + 33 :

var rows:uint = 3;
var cols:uint = 3;
var total:uint = rows * cols;


Rob

[simonok]

I've got it working great but trying to have a constant speed for the transitions, rather than a random.

I have tried messing with

timers[i] = new Timer(Math.random() * randomTime + minTime);
timers[i].addEventListener(TimerEvent.TIMER, changePic);

I changed to

timers[i] = new Timer(7000);

But it crashes my flash

simonok, on Sep 26 2008, 11:19, said:

Wow, superb, thanks very much rob, that's really fantastic.

[Roberto]

Hello

Its crashing because each picture position is looking for a picture that isn't being used - all at the same time. This might work if you twice as many pictures as you have rows x cols, but with not enough pictures an endless loop is started - looking for an unused picture. Is changing all the pictures at the same time what you wanted?

EDIT :

To make it work use twice as many pictures as rows * cols - make the following changes:

1. On line 42 :

timers[i]= new Timer(7000);

2. Remove or comment out (//) lines 151,152,153

//e.target.removeEventListener(TimerEvent.TIMER, changePic);
//timers[index] = new Timer(Math.random() * randomTime + minTime);
//timers[index].addEventListener(TimerEvent.TIMER, changePic);

Rob

[simonok]

I wanted to just slow it down, and fade in and fade out pictures at the same rate, not random, but when I increased the timers so its longer there is a massive delay at the start.

I'm making the change you suggest now

cheers
Si

Roberto, on Sep 27 2008, 11:03, said:

Hello

Its crashing because each picture position is looking for a picture that isn't being used - all at the same time. This might work if you twice as many pictures as you have rows x cols, but with not enough pictures an endless loop is started - looking for an unused picture. Is changing all the pictures at the same time what you wanted?

EDIT :

To make it work use twice as many pictures as rows * cols - make the following changes:

1. On line 42 :

timers[i]= new Timer(7000);

2. Remove or comment out (//) lines 151,152,153

//e.target.removeEventListener(TimerEvent.TIMER, changePic);
//timers[index] = new Timer(Math.random() * randomTime + minTime);
//timers[index].addEventListener(TimerEvent.TIMER, changePic);

Rob

[Roberto]

Roberto, on Sep 26 2008, 10:58, said:

Hello

This version can have as many rows/columns as you want, but you must have more pictures in your xml than rows x columns. You alter the number of rows/columns on lines 32 + 33 :

var rows:uint = 3;
var cols:uint = 3;
var total:uint = rows * cols;


Rob

Oops - Noticed that the order is out : 3 1 2, 6 4 5 ect - The fix :

move line 127: k++; to line 140 between picIndex[i]= i; + the }

Rob

[crush123]

I am quite new to this, but I had a go and i think it is great.

I worked out how to set the spacing etc by altering the stage size and it looks awesome.

I am new to actionscript, (though I just ordered a book), and have a couple of q's about this app.

I created a 4x2 grid with 24 rows in the xml, and set the timer so that all images changed after 6 seconds.
doing this (by accident rather than design) means the images load in consecutive order

ie 1-8 then 9-16 then 17-24

This works for about 4 cycles, but then the images go out of sync

What I would like to achieve are two things...

Firstly, keep the consecutive order. This is because, with a bit of planning, i can have image 'groups' which can occupy 2 or more cells, and which I think, look visually appealing. eg I can have a 200 X 100 image as two 100 X 100 blocks occupying 2 spaces. This looks fine until the images go out of sequence.

The second thing is an extension of the first, whereby the image 'groups' appear at random times, but always together (at the same time).
The only way I can see to do this, is for each image to always appear in the same position.
eg if I have 2 image blocks in position 5 and 6 on the grid, to appear as though a single image, they should always appear in positions 5 and 6.

I don't know how feasible this is, but I just thought I'd unload.

To see the problem I have with the images going out of sync, i have a link to my (currently under construction) site.

www.stonepits.com/RandomFade2/flash.php

Thanks for any help / advice

[Roberto]

@noproblem - The attachment has a version that will work with flash 8.

Hope that helps

Rob

Attached File(s)

•  Flash8v.zip (62.36K)
  Number of downloads: 29

[noproblem]

Roberto, on Jun 18 2009, 16:45, said:

@noproblem - The attachment has a version that will work with flash 8.

Hope that helps

Rob

cheers

[crush123]

Here is a slightly different take on the image grid, where images are loaded into set areas of the grid, and after specific intervals, rather than randomly.

Attached are 2 versions, the first version has no 'title' image, and the second one does.
If you want to display a single image after your image sequence, this version is required to synchronise the timings after each cycle.

Tutorial included in the file.

Any problems, please let me know

All kudos goes to Roberto for his coding. , thanks for your help.

Attached File(s)

•  imagegrid.zip (155.31K)
  Number of downloads: 54

[Roberto]

Good tutorial pdf in the zip, that clearly explains how to use the files - nice work

Rob

[ajay]

This is exactly what i've been looking for.. excellent examples!!

[ajay]

Roberto, i'm having a problem with your example (randomflash2)

i've got a canvas which is 872 x 327px
my images are 109px square
i've got a grid which is 8 x 3, which technically should fit exactly onto the canvas with no gaps between the images.

however, the images seem to be slightly overlapping. and when the images fade, i get a few blank spaces.
I have 24 images on display and have 59 images in my directory.


I'm guessing this has something to do with lines 119,120

	//find the space needed between the pictures
	var xSpace:Number = (stage.stageWidth - cols * picWidth) / (cols+1);
	var ySpace:Number = (stage.stageHeight - rows * picHeight) / (rows+1);

your help would be very much appreciated!

[Roberto]

Hello

The problem is that the images currently not being shown have their x position set to zero. This x position is used to determine if the image is being shown. This works fine when there are spaces between the images, as no image will be at zero x position. To get around this :

1. In the getPositions function change

for(var m:uint = total; m < picNum ; m++){
pics[m].alpha = 0;
}

to

for(var m:uint = total; m < picNum ; m++){
pics[m].alpha = 0;
pics[m].x = -10;
}


2. In the changePic function change

if(pics[nextPic].x == 0){

to

if(pics[nextPic].x == -10){

3. In the removePics function change

e.target.x = 0;

to

e.target.x = -10;

That should sort it out. Did you notice in the post above about moving k++; :

In the getPosition function move the line k++ from before the for loop and add it just below picIndex[i]= i; before the closing }.

Hope that helps

rob

EDIT : Attachment has a version that works with grids with/without spaces between images.

Attached File(s)

•  NoSpace.zip (65.36K)
  Number of downloads: 22

[ajay]

Rob, thats worked out perfectly.

Why -10 though?

[Roberto]

Hello

It could have been any position that wasn't on the stage, -247 would have worked just as well. When a picture is not being shown, its x position is set to -10, so I can check if an image is not being displayed by comparing its x position with -10. When a picture is being shown, it is positioned on the stage, so its x position will be zero or greater.

Rob

[ajay]

Hi Rob.. still loving your script.. thanks!

I'm trying to get it working for a single image (a banner spot) where i've got 5 different banners which need to display on rotation with individual links.

everything works fine, however the animation always starts with the first image in the xml file... subsequent images display in random order.

is there any way of making the first image a random one too?

[Roberto]

Hello

Can you add your code to the post or send me a copy of it in a PM.

Rob

[unknown.394]

heyy i have flash 5.0 and whenever i try to open the file, it says "Unexpected File Format" though, i am able to view the html file, cant view or edit the flash files. please help

[Roberto]

Hello

I cant make the file work in Flash 5, but if you post the background color and dimensions of the swf you need, I will post a resized swf .

Rob

[enginenr9]

Hi Roberto!

I'm trying to build an application that displays randomly thumbnails in a grid, but having problems with the random part. I found this thread to be the most closer to what I intend to do.

I'm displaying the thumbs in grid like this:

//building a thumbnail container for each one of the projects from the library
var thumbContainerMisc_mc:ThumbContainer = new ThumbContainer();
thumbContainerMisc_mc.x = (200+1) * x_counterMisc; //setting the thumbnail x
thumbContainerMisc_mc.y = (200+1) * y_counterMisc; //setting the thumbnail y
thumbContainerMisc_mc.buttonMode = true; //putting thumbnail container MovieClip in button mode
thumbContainerMisc_mc.mouseChildren = false; //tell him to ignore any mouseChildren (remove any clicking problems)
					
//distributing the thumbnails in a grid with 5 columns
if (x_counterMisc < 4){
   x_counterMisc++;
} else {
   x_counterMisc = 0;
   y_counterMisc++;
}

//and finally, adding the thumbnail container to gallery container
galleryMisc_mc.thumbGroupContainer_mc.addChild(thumbContainerMisc_mc);

What I'm trying to do is to randomly put the thumbs in the grid before adding it to gallery container, not sequenciated like I have right now.
Can you point me out in the right direction?

Appreciate your help.
Cheers.

This post has been edited by enginenr9: 05 March 2011 - 03:23 PM