A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: using XML to display an image

  1. #1
    Junior Member
    Join Date
    Jan 2009
    Posts
    10

    *SOLVED* using XML to display an image

    Hi,

    I'm having a hard time wrapping my head around XML, in particular using XML to place an image on the stage.

    I've got some code which I've appropriated from a tutorial, which creates a nice XML driven menu - And I would like to adapt it so that when I click on a menu item it displays a JPG (it currently calls up defined labels on my timeline, which is not really what I'm looking for)

    I'm really hoping somebody can help me out with this, as trawling google hasn't really given me the simple answer I was looking for (lots of XML galleries tutorials, but I couldn't find an easy tutorial to display 1 image)

    Here is my XML:

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <menu>
    <menu buttonName = "item 1" />
    <menu buttonName = "item 2" />
    <menu buttonName = "item 3" />
    </menu>
    Now, I know I need to put another node in my XML with a URL for my image - I'm just not 100% sure how I should insert that into this code

    and here is the AS:
    I have created an MC on the stage with the instance name "imageHolder".
    The following code currently doesn't have any provision to use any image.

    Code:
    pages.stop();
    ready = false;
    speed = 5;
    xStart = 5;
    yStart = 48;
    bWidth = 82;
    bHeight = 18;
    var menuXml = new XML();
    //loadXml("../assets/xml-menu/menu.xml");
    loadXml("menu.xml");
    function loadXml(file:String) {
        menuXml.ignoreWhite = true;
        menuXml.onLoad = loadMapData;
        menuXml.load(file);
        function loadMapData() {
            for (var i = 0; i<this.firstChild.childNodes.length; i++) {
                var bn = this.firstChild.childNodes[i].attributes.buttonName;
                var b = _root.attachMovie("button", bn, i);
                b._x = xStart;
                b._y = yStart+(bHeight*i);
                b.txt = bn;
                b.onPress = function() {
                    pages.gotoAndStop(this.txt);
                    pages.heading = this.txt;
                    target = this._y;
                };
                /*b.onRollOver = function() {
                this.gotoAndStop(2);
                };
                b.onRollOut = function() {
                this.gotoAndStop(1);
                };*/
            }
        }
    }
    var c = this.attachMovie("current", "current", 100);
    var d = this.attachMovie("draw", "draw", 101);
    d._x = 5;
    d._y = 160;
    c._x = xStart+bWidth;
    c._y = 200;
    target = yStart;
    this.onEnterFrame = function() {
        if (ready) {
            current._y += (target-current._y)/speed;
        }
    };
    If anyone could spare a moment to help me understand how I can make this happen with this code I'd be very appreciative.
    cheers
    Last edited by shanDB; 11-17-2009 at 08:18 AM.

  2. #2
    FK'n_dog a_modified_dog's Avatar
    Join Date
    Apr 2003
    Location
    "aaarf"
    Posts
    9,176
    add an image attribute to the XML -
    PHP Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <menu>
    <menu buttonName = "item 1" imgName="1.jpg"/>
    <menu buttonName = "item 2" imgName="2.jpg"/>
    <menu buttonName = "item 3" imgName="3.jpg"/>
    </menu>
    parse the imgName and link to the buttons -
    PHP Code:
    pages.stop();
    ready false;
    speed 5;
    xStart 5;
    yStart 48;
    bWidth 82;
    bHeight 18;
    var 
    menuXml = new XML();
    //loadXml("../assets/xml-menu/menu.xml");
    loadXml("test.xml");
    function 
    loadXml(file:String) {
        
    menuXml.ignoreWhite true;
        
    menuXml.onLoad loadMapData;
        
    menuXml.load(file);
        function 
    loadMapData() {
            for (var 
    0i<this.firstChild.childNodes.lengthi++) {
                var 
    bn this.firstChild.childNodes[i].attributes.buttonName;
                var 
    _root.attachMovie("button"bni);
        var 
    img this.firstChild.childNodes[i].attributes.imgName;
        
    b.link img;
                
    b._x xStart;
                
    b._y yStart+(bHeight*i);
                
    b.txt bn;
                
    b.onPress = function() {
        
    trace(this.link);
        
    // imageHolder.loadMovie(this.link);  // load to empty movieclip
                    
    pages.gotoAndStop(this.txt);
                    
    pages.heading this.txt;
                    
    target this._y;
                };
                
    /*b.onRollOver = function() {
                this.gotoAndStop(2);
                };
                b.onRollOut = function() {
                this.gotoAndStop(1);
                };*/
            
    }
        }
    }
    var 
    this.attachMovie("current""current"100);
    var 
    this.attachMovie("draw""draw"101);
    d._x 5;
    d._y 160;
    c._x xStart+bWidth;
    c._y 200;
    target yStart;
    this.onEnterFrame = function() {
        if (
    ready) {
            
    current._y += (target-current._y)/speed;
        }
    }; 

  3. #3
    Junior Member
    Join Date
    Jan 2009
    Posts
    10
    thanks for your reply.. It's certainly got me on the track, but not quite there yet..

    When I test my movie, and click on one of my menu buttons, rather than getting an image to display I'm instead getting the name of the image typed into the OUTPUT window in flash..

    Any ideas on why that might be happening.

    Once again, thanks for your help

  4. #4
    Junior Member
    Join Date
    Jan 2009
    Posts
    10
    ahhh success!!!

    looking over your code again, I realized you made your amendments as comments..

    it worked - thanks so much.. Scratching my head with this over the last 24 hours, and I now have a much better understanding of how XML works..

    thank you..

    For anyone else reading this.. my code is now as follows:

    Code:
    pages.stop();
    ready = false;
    speed = 5;
    xStart = 5;
    yStart = 48;
    bWidth = 82;
    bHeight = 18;
    var menuXml = new XML();
    //loadXml("../assets/xml-menu/menu.xml");
    loadXml("menu.xml");
    function loadXml(file:String) {
    	menuXml.ignoreWhite = true;
    	menuXml.onLoad = loadMapData;
    	menuXml.load(file);
    	function loadMapData() {
    		for (var i = 0; i<this.firstChild.childNodes.length; i++) {
    			var bn = this.firstChild.childNodes[i].attributes.buttonName;
    			var b = _root.attachMovie("button", bn, i);
    			var img = this.firstChild.childNodes[i].attributes.imgName;
    			b.link = img;
    			b._x = xStart;
    			b._y = yStart+(bHeight*i);
    			b.txt = bn;
    			b.onPress = function() {
    				imageHolder.loadMovie(this.link);  // load to empty movieclip
    				pages.gotoAndStop(this.txt);
    				pages.heading = this.txt;
    				target = this._y;
    			};
    			/*b.onRollOver = function() {
    			            this.gotoAndStop(2);
    			            };
    			            b.onRollOut = function() {
    			            this.gotoAndStop(1);
    			            };*/
    		}
    	}
    }
    var c = this.attachMovie("current", "current", 100);
    var d = this.attachMovie("draw", "draw", 101);
    d._x = 5;
    d._y = 160;
    c._x = xStart+bWidth;
    c._y = 200;
    target = yStart;
    this.onEnterFrame = function() {
    	if (ready) {
    		current._y += (target-current._y)/speed;
    	}
    };

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