A Flash Developer Resource Site

Results 1 to 15 of 15

Thread: XML grid in flash ????

  1. #1
    Senior Member
    Join Date
    Aug 2007
    Posts
    100

    XML grid in flash ????

    What I am aiming for is one movieclip in flash to duplicate depending on how many images are declared in xml and display them like a grid. But I have no idea how to do this. Here is an example of the XML file.

    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <images>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    <pic>
    <image>images/imagename.jpg</image>
    <caption>caption</caption>
    </pic>
    </images>

  2. #2
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    do you already have a movieClip on the stage you want duplicated? or are you saying you just want to load in the XML..and depending on ow many image names/nodes you have..you want to display each image in the XML in a 'grid' (row/column) pattern?

  3. #3
    Senior Member
    Join Date
    Aug 2007
    Posts
    100

    Duplicated

    I would like one movieclip to duplicate depending on how many pictures are declared in the XML
    Pattern idea is:

    5 columns
    5 rows

  4. #4
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    something like this would work fine:

    PHP Code:
    var myXML:XML = new XML();
    myXML.ignoreWhite true;
    myXML.onLoad = function(){
        
        
    //parse XML data:
        
    var imagesNode myXML.firstChild;
        var 
    totalImages myXML.firstChild.childNodes.length;
        
        for(
    i=0i<totalImagesi++){
            var 
    imgNode imagesNode.childNodes[i].childNodes[0].firstChild.nodeValue;
            var 
    textNode imagesNode.childNodes[i].childNodes[1].firstChild.nodeValue;
            
    trace("test: "+imgNode);
            
    trace("test: "+textNode);
            
            
    //attatch template clips to hold images & text
            
    var newClip _root.attachMovie("templateClip""templateClip"+i_root.getNextHighestDepth());
            
    //Define the grid columns (in number of cells);
            
    var columns:Number 4;
            
    //Define the item hSpacing;
            
    var hSpacing:Number 10;
            
    //Define the item hSpacing;
            
    var vSpacing:Number 10;
            
            
    //position clip
            
    newClip._x 10;
            
    newClip._y 10;
            
    newClip._x += ((columns)) * (newClip._width hSpacing);
            
    newClip._y += Math.floor(columns) * (newClip._height vSpacing);
            
            
    //populate template clip
            
    newClip.textField_txt.text textNode;
            
    newClip.imageHolder.loadMovie(imgNode);

        }
        
    }
    myXML.load("data.xml"); 

    you will need a movieClip in your library.. with the linkageID of: templateClip

    that template clip has 3 layers:

    1.) a square fill for a BG
    2.) an empty movieClip (to be used to load an image into) instance name: imageHolder
    3.) a text field named: textFeld_txt
    Attached Files Attached Files

  5. #5
    Senior Member
    Join Date
    Mar 2008
    Posts
    160
    Whispers, I've been going over your solution here. I have figured out how it works and appreciate the explanation. I am looking to build a grid of images as a landing effect. Difference is that I want each image to tween in randomly to build the grid. Then be able to control the fade out of groups of image to show navigation.
    I my mind I would have to apply the tween (i am trying to use Fuse) where you commented the template clip is populated.

  6. #6
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    hi-

    sorry, but Im not really understanding..

    1.) what is a landing effect?

    2.) tween in randomly to build a grid?

    3.) fade out groups..what do you mean groups?

    is there a link of something like this you have seen? do you have any images to convey the effect your after?

    thanks

  7. #7
    Senior Member
    Join Date
    Mar 2008
    Posts
    160
    HI WHISPER,

    Okay, I know I was a bit abstract.

    1. Like and interstitial. When you enter site I want the entire stage(which will float center in HTML) to fill with individual images (small thumbs). Random would be great, but not sure if that will enhance the design.

    2. When they appear they fade in rather than just pop on stage.

    3. Once on stage you have the grid. my nav panels will be two verticle rectangular bars on the left and right of the stage. After the images all appear on stage, count 3 secs. or so and three rows on each side fade out and the nav will appear over that.

    Don't have a comp mach-up now but can make it. Does that help.

    I really want to get a better understanding of presenting information in thie sense. I guess it is an array issue.. I see a need for this function in a lot of future work I will go after. So to say, I really want to understand the process and not duplicate it! I appreciated above solution and commenting in the as!

  8. #8
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    1.) you want to load random images? or load/display them in random placement?

    I dont even know what interstitial means.. LOL (sorry)

    but Im sure we can work some sort of solution together..


    how many thumbnails are there to be in this grid?

    ok..so lets re-cap

    load some thumbnails in a grid pattern/layout
    they need to fade in for each one.

    after they ALL load... you need to remove some (fade out) to reveal a navigation under it...

    is this the gist of it?

  9. #9
    Senior Member
    Join Date
    Mar 2008
    Posts
    160
    Hi,
    1. Yes, Say I have a bunch of images in a folder that is pointed to by XMl. I want to randomly populate that grid space. Not by row one, then two, etc.

    Interstitial mean between. Like a landing page that has the old"you need flash to view this site". I will have a landing interstitial that has the getFlash thingy, view site and view iphone version.

    Not sure how many thumbs yet. Let's just call it 800 x 500 for the sake of argument.

    You got the rest of the gist dead on. Thank you!

    Do you freelance? You got a site?

  10. #10
    Junior Member
    Join Date
    Sep 2008
    Posts
    14
    Hello,

    I know this thread has been inactive for quite some time... but I have been searching for an answer to this problem for weeks! So thank you Whispers for providing that solution... you saved my bacon!

    However, i now have a new problem. I am loading my swf with the grid of images into another swf using the LoadMovie function... but for some reason its not showing up. Static text and other stuff shows up but not the dynamically loaded images....

    Any ideas why this could be happening?

    THanks for any help

    Jane

  11. #11

  12. #12
    Junior Member
    Join Date
    Sep 2008
    Posts
    14
    Thats exactly what it was! I've never really understood how _root works.. but now its making more sense to me.

    Thanks so much!

  13. #13
    Flashmatics silentweed's Avatar
    Join Date
    Mar 2005
    Location
    London, UK
    Posts
    4,876
    yep put this._lockroot = true; in the external swf in the first frame right at the beginning..that should sort your issue out.. if it's not already sorted
    Flashmatics | Flashmatics Library (free downloads)
    -----------------------------------------------------
    Latest Projects:
    The Dead Room | Are You Smarter | Prison Break (Frame A Friend) | Beck's Fusions | The 24 Experience

    -----------------------------------------------------
    Flash Certified Developer

  14. #14
    Junior Member
    Join Date
    Sep 2008
    Posts
    14
    Actually what I did was just remove all the _roots from the code in the inner swf and that worked fine.

    But thanks for providing another solution!

  15. #15
    Junior Member
    Join Date
    Jan 2010
    Posts
    1
    bumping a REAL old topic...

    Thanks for whispers who put out the code.
    I was working on this as well.

    By the way, I am new here. but I checked out the forum some times if I could not figure this out by myself. But here now.. I am asking for some help.

    I would like to click on a "newClip" and see some addition information.

    let me post the actionscript code.

    Code:
    var myXML:XML = new XML();
    myXML.ignoreWhite = true;
    myXML.onLoad = function(){
    	
    	//parse XML data:
    	var imagesNode = myXML.firstChild;
    	var totalImages = myXML.firstChild.childNodes.length;
    	var i:Number;
    	
    	for(i=0; i<totalImages; i++){
    		var imgNode = imagesNode.childNodes[i].childNodes[0].firstChild.nodeValue;
    		var textNode = imagesNode.childNodes[i].childNodes[1].firstChild.nodeValue;
    		trace("test: "+imgNode);
    		trace("test: "+textNode);
    		
    		//attatch template clips to hold images & text
    		var newClip = _root.attachMovie("templateClip", "templateClip"+i, _root.getNextHighestDepth());
    		var contentClip = _root.attachMovie("content", "content"+i, _root.getNextHighestDepth());
    		//Define the grid columns (in number of cells);
    		var columns:Number = 4;
    		//Define the item hSpacing;
    		var hSpacing:Number = 10;
    		//Define the item hSpacing;
    		var vSpacing:Number = 10;
    		
    		//position clip
    		newClip._x = 10;
    		newClip._y = 10;
    		newClip._x += ((i % columns)) * (newClip._width + hSpacing);
    		newClip._y += Math.floor(i / columns) * (newClip._height + vSpacing);
    		contentClip._y = Stage.height/2;
    		contentClip._x = Stage.width/2;
    		contentClip._visible = false;
    		
    		//populate template clip
    		newClip.textField_txt.text = textNode;
    		newClip.imageHolder.loadMovie(imgNode);
    		
    		newClip.onRelease = function () {
    			contentClip._visible = true;
    			contentClip.tekst.text = textNode;
    		}
    		contentClip.onRelease = function () {
    			this._visible = false;
    		}
    	}
    	
    }
    myXML.load("data.xml");
    * I have made a new movieclip with a id called "content" with a dynamic textfield called "tekst".

    As you can see I have changed minor things to make this newClip clickable.
    But it seems that the text showed up in the contentClip will always be the last text what the textNode will be displaying.

    I would like to be able when I click on a newClip, the text of that newClip will be shown and not the last text of the xml file.

    Any idea's how to solve this puzzle?

    Thanks in Advance!

    Cheers,

    Ruben

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center