This appears to be a flash file, you cannot see a preview because flash player is no longer supoorted in browsers, but you can still download the file to study it's source code.
You can open/play the swf file with Flash Player exe
You can open/play the swf file with Flash Player exe
adrianTNT (32)
Grid Image loader
Grid image loader, loads images and creates boxes with rollover effects, the editable area of the code looks like this:----------------------
file_to_load = "sample.jpg";
grid_width = 100;
grid_height = 100;
grid_line_thickness = 1;
grid_color = "000000";
grid_alpha = 20;
buttons_alpha = 100;
----------------------
You can change these to create different result, smaller boxes,... more >
7745 downloads, 61055 views
thumbs grid square box boxes image images photo photos load loader rollover white effect effects
Comments
You need to login to post a comment.
There is a bug even on this page example and cannot find a solution.In the 1st visit flash plays ok.if u close browser and reopen the page,flash fails the hover effect except the 1st box.:/
I figured it out! thanx!!
Maybe it cannot find the image, on Linux servers the path to image is case-sensitive and that causes you to work locally and not on server and things like that.
Maybe you told it to load sample.jpg and file is sample.JPG, I seen this very often.
I dont have it on the web yet. Im making the page. Previewing it, it just shows the top left corner square, as a white box when you roll ver. and the whole thing black. I have played it in flash player on my computer, and it works. So I must be missing something in Dreamweaver. Has this happenened to anyone? thanx in advance.
Show me your link, I will have a look.
Hi, Im must be doing something wrong. When I put it in my page and preview the web, it just shows black square, of the size of the movie. I have changed the picture and size of the movie, and in flash it works. Am I missing a step? Thanx
could I add some text on a button?
After refresh it's
working
Is the file sample.jpg in the same folder?
or even on live view on dream weaver never work
it do is not work :(
when I use on flash program it work good but when I use it with html in IE8 or fire fox it only give me black square on the top of the photo
MY little "tutorial"(i didnt open the file)
1. create a new project
2. draw or paste and image
3. create new layer and lock layer 1
4. draw grid
5. remove every box but one
6. make sure there are boundaries
7. make the fill white
8. convert it to a symbol(movieclip)
9. double click the grid.
10. select the grid and convert it to a symbol
11. create a motion tween
12. animate the rollover effect
13. create a new layer
14. open actions for frame
15. type:
stop();
on(rollOver){gotoAndPlay(2)}
16. Double-click at the side of the grid.
17. copy the grid section and place the copies to it creates... a complete grid
NEWBIES - INSTRUCTIONS:
1. Download file (you need to register to do so, its free)
2. Open "loader.fla" in Adobe Flash CS4 or "loader_mx2004" for Flash 8.
3. View code by double clicking on "tnt_loader" from libary and make sure your "windows > actions" pane is open.
4. Make changes to code.
Tips -
The location of the picture in the code should be relevant to the webpage location not the swf file.
To make sure the squares fill the image evenly, divide the number of squares across or down you want by the width or height of your new image and use this as your new width or height.
You cannot "add" more images, you just replace the image by changing this code inside main code (on first frame):
file_to_load = "sample.jpg";
where do I edit to add more images?
Changing the size of the boxes proportionally to the size of the stage, does not work either...
It keeps leaving blank spaces as well....
Thanks!!!
thanks adrian, 43x44 did the trick :-) and HandCursor too - this leaves only the autorepeated, random autoplay to be solved :-)
For that exact size (860x484) it should work ok with:
grid_width=43
grid_height=44
I think it cannot split the boxes in an equal size if it leaves empty squares, try above values, it should work.
about the cursor, it has a default value that is "false" inside the clip, but in your main code you can target speciffic clip like this:
loader_buttons.button10.useHandCursor = true
My picture is 860x484 - and I've changed the stage size accordingly. The 860 width I prefer to leave as it is (to much work changing the website's width), but the height I might change - if thats the problem. Now I've set the grid width to 86 and the height to 81 - which seems to be nice grid of "squares" - then I have only one single "dead" square on the bottom right corner. Thats ok - I don't see why it should be dead, though. What about the hand cursor? Would it be possible to turn it on only at rectangle with link?
Have you tried different rectangle width/height in order to fill all area?
Claper57, same happens to me... I could change the size of the boxes as AdrianTNT told me, but it keeps leaving a right-bottom blank space, no mater the size of the individual boxes.
Thanks!
sorry - didn't read the description before I posted :-) On some grid size values a fairly large amount of the bottom of the picture remains "unrectangled" - why is that? As you understand I'm not a coder. I also would like to have the HandCursor tutn on only on the recangle with the link - not all th pthers. Would that be possible?
Yes, you can change the rectangle width/height, it is also in description. I thought about that effect too (boxes play randomly) but looks like I didn't do it after all, unfortunately I don't know when/if this could be modified.
Very nice effect. It also would be nice if there was an option to have the rectangles highlite randomly and automatic as long as the page containing the image is active. Anything you might look into? And I agree that it would be nice to be able to change the size of the rectangles
Antaraflo: there should be an area where you can change box size, I think at very begining of the code, you should set a box width/height so that boxes will fill all your area. I hope this helps.
Hello! I love your work!
I used it on a website im working on, and ive changed the size of the flash to 600 x 500 but when squares are animated, in the bottom right corner there are some ones missing... how can i change the code to generate more squares to fill the new size??
thanks from Arg!!!!!
great
great job man.
nice one
Thanks a lot for the great support
It works fine,
I real appreciate that
Nice Regards from Indonesia
KB
Kinabalu, that is possible.
To add a link on let's say clip 10, edit the main clip's code right after the long "FOR" loop, before the last "}" that is on last line, add this:
loader_buttons.button10.onRelease = function() {
getURL("http://www.ffiles.com", "_parent");
};
Then you might want to remove the line useHandCursor = false from the code inside "button" clip in the library.
Thanks for the fine script
I like it a lot,
I was try to place for every square/ button a separate hyperlink, but honestly I cant figure out..
Did everybody know a way; it will be a so great menu if it is possible
Regards
KB
very interesting concept, thanks. u r always the best on this website.
The boxes should be visible all the time now (hopefully) because I update it a bit.
It is an effect for images, you can place it in website header for example instead of a plain image.
what is it supposed to do? All I see is one image, and sometimes if I reload I see the boxes and rollover effects (FF/Mac), but it doesn't do anything. What's the purpose???
I found the problem; and I remember that I seen this problem before, so usually if files do not work first time they load but work ok after you refresh the page then it might be this:
You usually test if bytes loaded are equal to bytes total but you have to also test if bytes total are larger than zero, otherwise before file starts to load it already thinks it is fully loaded, in my case I replaced:
if (image_holder.getBytesLoaded() == image_holder.getBytesTotal()) {
// setting the boxes
}
with:
if (image_holder.getBytesLoaded() == image_holder.getBytesTotal() and image_holder.getBytesTotal()>0) {
// setting the boxes
}
It must be the way I test for total percent loaded, because it sets the boxes once the loading of image is complete so I will have to double check the code where it checks when loading is completed.
Thanks for the feedback.
... same issue here using Mozilla Firefox. Refresh, hit "f5" and it loaded correctly.
Curious. It comes in as a single image on first load in safari (mac). On reload it works as expected.
Nice effect though Adrian.
Very strange, I didn't knew, it looks like plain image in Chrome and Mozilla, I will look into it.
Flash can't represent on Firefox and Chorme. but Flash can represent on Internet Explorer.
This was posted at mmfiles for sale but I guess it is too simple, it didn't generate any sales so I thought is best to offer it for free.