By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,763 Members | 1,609 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,763 IT Pros & Developers. It's quick & easy.

[Flash8] Image MouseOver in XML Gallery

P: 2
Hi,

I am currently working on an XML Gallery for my girlfriend's brother who is a photographer. I have created a flash front end template and am using an XML database to load the images and accompanying captions.

The gallery has more than one image and the user can navigate the gallery by clicking forward and backward buttons to take then through the images:
Expand|Select|Wrap|Line Numbers
  1. var galleryXML = new XML();
  2. galleryXML.ignoreWhite = true;
  3. galleryXML.load("gallery.xml");
  4. var currentIndex:Number = 0;
  5. galleryXML.onLoad = function(success) {
  6.     if (success) {
  7.         total = galleryXML.firstChild.childNodes.length;
  8.         var galleryXML:Array = galleryXML.firstChild.childNodes;
  9.         //For creating the block-thumbnails to link to the pictures in the gallery
  10.         for (var i:Number = total; i>0; i--) {
  11.             myClip.duplicateMovieClip("thumbnail_mc"+i, i, {_x:i*20, _y:i*20});
  12.         }
  13.         image_holder1_mc.loadMovie("images/"+galleryXML[currentIndex].attributes.filename1);
  14.         image_holder2_mc.loadMovie("images/"+galleryXML[currentIndex].attributes.filename1);
  15.         caption1_txt.text = galleryXML[currentIndex].attributes.caption1;
  16.         caption2_txt.text = galleryXML[currentIndex].attributes.caption2;
  17.         //testing to see if it is grabbing the correct template/scene in the XML file
  18.         template_txt.text = galleryXML[currentIndex].attributes.template;
  19.         //testing to see if it is calculating the correct number of entries in the XML file
  20.         total_txt.text = total;
  21.     }
  22. };
  23. listen = new Object();
  24. listen.onKeyDown = function() {
  25.     if (Key.getCode() == Key.LEFT) {
  26.         prevImage();
  27.     } else if (Key.getCode() == Key.RIGHT) {
  28.         nextImage();
  29.     }
  30. };
  31. Key.addListener(listen);
  32. previous_btn.onRelease = function() {
  33.     prevImage();
  34. };
  35. next_btn.onRelease = function() {
  36.     nextImage();
  37. };
  38. function nextImage() {
  39.     if (currentIndex<(total-1)) {
  40.         currentIndex++;
  41.         var currentNode = galleryXML.firstChild.childNodes[currentIndex];
  42.         trace(currentNode);
  43.         current_pos = currentIndex+1;
  44.         image_holder1_mc.loadMovie("images/"+currentNode.attributes.filename1);
  45.         image_holder2_mc.loadMovie("images/"+currentNode.attributes.filename2);
  46.         caption1_txt.text = currentNode.attributes.caption1;
  47.         caption2_txt.text = currentNode.attributes.caption2;
  48.         next_imageNumber();
  49.     }
  50. }
  51. function prevImage() {
  52.     if (currentIndex>0) {
  53.         currentIndex--;
  54.         var currentNode = galleryXML.firstChild.childNodes[currentIndex];
  55.         trace(currentNode);
  56.         image_holder1_mc.loadMovie("images/"+currentNode.attributes.filename1);
  57.         image_holder2_mc.loadMovie("images/"+currentNode.attributes.filename2);
  58.         caption1_txt.text = currentNode.attributes.caption1;
  59.         caption2_txt.text = currentNode.attributes.caption2;
  60.         previous_imageNumber();
  61.     }
  62. }
  63. function next_imageNumber() { 
  64. current_pos = currentIndex+1; 
  65. nextImageOfX.text = current_pos+" / "+total;
  66. //caption2_txt.text = current_pos;
  67. }
  68. function previous_imageNumber() { 
  69. current_pos = currentIndex+1; 
  70. nextImageOfX.text = current_pos+" / "+total;
Everything is working so far except the following: The effect that I want to achieve is when the user mouses over the image, the image shades (I am just going to use a simple rectangle the size of the photo and put it at a 30% alpha transparency) and the caption appears over the image. When the user's mouse leaves the photo, the shade and caption disappears.

The code that I am using (that's not working on any dynamic images loaded from the XML file) is as follows:

In the main actionScript in frame 1 of the timeline I have:

Expand|Select|Wrap|Line Numbers
  1. _root.image_holder1_mc.onEnterFrame = function() {
  2. if (mouse_over_image_holder1_mc) {
  3. _root.image_holder1_mc.nextFrame();
  4. } else {
  5. _root.image_holder1_mc.prevFrame();
  6. }
  7. };
On the invisible button over the image I have:
Expand|Select|Wrap|Line Numbers
  1. on (rollOver) {
  2. _root.mouse_over_image_holder1_mc = true;
  3. }
  4. on (rollOut) {
  5. _root.mouse_over_image_holder1_mc = false;
  6. }
In image_holder1_mc (where the image is loaded into), the first frame does not have the shaded rectangle nor the caption but frame 2 has both. When the user mouses over the invisible button in the root timeline, frame 2 of the image_holder1_mc movie clip SHOULD be played but it does not. I have been able to make it work with just a static image not loaded from XML but as soon as I use the dynamically loaded image, the feature does not work (it also does not grab the captions that's associated with the image).

Is this a case of image_holder1_mc being changed due to the file name of the image that gets loaded or is image_holder1_mc always going to be image_holder1_mc regardless of the image name?

This seemed like it would be a simple thing to do but it isn't turning out that way.

Thank you in advance for your time and patience.
Brent a.k.a. numbnutz
Jul 16 '07 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.