dcsimg
A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: [RESOLVED] [CS3] Help...Image swap using AS2 & XML???

  1. #1
    Member
    Join Date
    Jul 2001
    Location
    USA
    Posts
    78

    resolved [RESOLVED] [CS3] Help...Image swap using AS2 & XML???

    I'm a little confused ...I have a gallery featuring black & white images. I want the black & white image to change to a color version if the user rolls over the image. I've currently got the bw images to load into my flash with AS2 & XML. How do I get the image to change on rollover using XML????? I figured out how to have the image if clicked go to a URL but am stuck on how to swap images instead. Can I have two images called out in the XML?

    ACTIONSCRIPT
    Code:
    Stage.scaleMode = "noscale";
    
    /////////////////
    // Loading XML //
    /////////////////
    myXML = new XML();
    myXML.ignoreWhite = true;
    myXML.load("portfolio.xml");
    myXML.onLoad = function(_status) {
    	if (_status) {
    		tempxml = myXML.firstChild.childNodes;
    
    		var space = 25; // Space between items you can increase this to whatever
    		for (var i = 0; i<tempxml.length; i++) {
    			
    			var item = list_mc.attachMovie("clip", "clip"+i, i); // In the library, rightclick on item and choose linkage. You'll see that our items are represented in the code the "clip" name
    			
    			item._y = (item._height+space)*i; // This places our items on y axis
    			item.title_txt.text = tempxml[i].attributes.title; // For i<total, attaches a title i to our item
    			//item.date_txt.text = tempxml[i].attributes.date; // For i<total, attaches a title i to our item
    			item.descr_txt.text = tempxml[i].attributes.description; // This attaches a description i to our item
    			//item.url_txt.text = tempxml[i].attributes.url; // And this one a url i to our item
    			
    			item.thumbHolder.loadMovie(tempxml[i].firstChild); // Attaches thumbnails to each item
    			
    			//item.btn.id = i;
    			//item._alpha=75; // Sets an alpha = 50 to our items. This can be increased or decreased. It serves for the fade in/fade out effect
    			//item.onRollOver = function() {
    			//	this.alphaTo(100, 1, "easeOutExpo"); // When I rollOver each item, alpha goes smoothly to 100
    			//};
    			//item.onRollOut = function() {
    			//	this.alphaTo(75, 1, "easeOutExpo"); // When I rollOut alpha goes back to 50 as it was. This value should be the same with the one above
    			//};
    			//item.onRelease = function()   {
    			//	item.btn.getURL(this.url_txt.text,"_blank"); // When I click on an item, it opens an url (wich I set in the xml for each button) in a blank window of my browser
    		//	};
    		}
    		
    		delete myXML;
    	}
    };
    
    ////////////////////////////
    // Setting our scroll bar //
    // We'll call it dragger ///
    ////////////////////////////
    targY = 50;
    abstandDragger = -195; // If you resize the items, or whatever you'll have to modify this value in order to have your dragger in the right x position
    dragger._x = mask_mc._width+abstandDragger;
    
    
    dragger.onRollOver = function (){
    	this.colorTo("0xFFFFFF", 1, "easeOutExpo"); // The color code from here makes our dragger white. Change this to modify color
    };
    
    dragger.onRollOut = function (){
    	this.colorTo("0x999999", 1, "easeOutExpo"); // The color code makes our dragger grey as it is in fact. This should be the same as dragger's color as shape ;)
    };
    
    dragger.onPress = function() {
    	startDrag(this, false, this._x, 0, this._x, mask_mc._height-this._height); // Doesn't allow our dragger to get out of some coordinates
    };
    
    
    
    dragger.onRelease = dragger.onReleaseOutside=function () {
    	stopDrag(); // Stops the mouse drag action
    };
    
    
    list_mc.setMask(mask_mc);
    list_mc.onEnterFrame = function() {
    	scrollAmount = (this._height-mask_mc._height)/(mask_mc._height-dragger._height);
    	targY = -dragger._y*scrollAmount;
    	this._y -= (this._y-targY)/10; // Scroll delay - Ease. Change this value to experiment
    };
    
    /////////////////////////////////////
    // Setting the mouse wheel support //
    /////////////////////////////////////
    var dragger:Object = new Object();
    dragger.onMouseWheel = function(delta) {
    	if(this._y >= 3)
    	{
        this._y -= delta;
    	}else{
    		this._y = 3;
    	}
    	if(this._y <= mask_mc._height-this._height)
    	{
    		this._y -= delta;
    		}else{
    			this._y = (mask_mc._height-this._height);
    }
    }
    Mouse.addListener(dragger);
    
    /////////
    // End //
    /////////

    XML
    Code:
    <?xml version="1.0" ?>
    <items>
    <pic title="Sanctuary Camelback Mountain Resort & Spa" description="Paradise Valley, AZ">portfolio/p1bw.jpg</pic>
    
    <pic title="Trader Vic’s" description="Scottsdale, AZ">portfolio/p2bw.jpg</pic>
    
    <pic title="Salobre Resort & Spa" description="Gran Canaria Island, Spain">portfolio/p3bw.jpg</pic>
    
    <pic title="Boulders" description="Carefree, AZ">portfolio/p4bw.jpg</pic>
    
    <pic title="Warm Springs Ranch" description="Ketchum, ID">portfolio/p5bw.jpg</pic>
    
    <pic title="Kimberlee" description="Scottsdale, AZ">portfolio/p6bw.jpg</pic>
    
    <pic title="Bighorn" description="Palm Desert, CA">portfolio/p7bw.jpg</pic>
    
    <pic title="Southbridge Mixed-Use Development" description="Scottsdale, AZ">portfolio/p8bw.jpg</pic>
    
    <pic title="Maravilla" description="Scottsdale, AZ">portfolio/p9bw.jpg</pic>
    
    <pic title="CANAL" description="Scottsdale, AZ">portfolio/p10bw.jpg</pic>
    
    <pic title="Pinnacle View" description="Scottsdale, AZ">portfolio/p11bw.jpg</pic>
    
    <pic title="Mountain Vista" description="Scottsdale, AZ">portfolio/p12bw.jpg</pic>
    
    <pic title="Valley Ho" description="Scottsdale, AZ">portfolio/p13bw.jpg</pic>
    
    <pic title="Montelucia" description="Paradise Valley, AZ">portfolio/p14bw.jpg</pic>
    
    <pic title="Hops" description="Scottsdale, AZ">portfolio/p15bw.jpg</pic>
    
    <pic title="Bridge House" description="Scottsdale, AZ">portfolio/p16bw.jpg</pic>
    
    <pic title="Fairmont Scottsdale" description="Scottsdale, AZ">portfolio/p17bw.jpg</pic>
    
    <pic title="Grandview at Las Vegas" description="Las Vegas, NV">portfolio/p18bw.jpg</pic>
    
    <pic title="Grand Central Hotel" description="Durango, Colorado">portfolio/p19bw.jpg</pic>
    </items>
    Thanks!
    Leah5569

  2. #2
    :
    Join Date
    Dec 2002
    Posts
    3,518
    One method, would be to...
    1) In the library, open 'clip'
    2) Make a copy of 'thumbHolder', instance name 'thumbHolderC', layer it underneath 'thumbHolder'.
    3) Modify your XML file (this way you can use the same file name for both the black and white and color versions, they are just located in different folders), following this format...
    PHP Code:
    <?xml version="1.0" ?>
    <items path1="portfolio/" path2="portfolioC/">
          <pic title="one">pic01.jpg</pic>
          <pic title="two">pic02.jpg</pic>
          <pic title="three">pic03.jpg</pic>
          <pic title="four">pic04.jpg</pic>
     </items>
    4) Change the code...
    Code:
    tempxml = myXML.firstChild.childNodes;
    var path1 = myXML.firstChild.attributes.path1;
    var path2 = myXML.firstChild.attributes.path2;
    Code:
    item.thumbHolder.loadMovie(path1 + tempxml[i].firstChild);
    item.thumbHolderC.loadMovie(path2 + tempxml[i].firstChild);
    Code:
    item.onRollOver = function() {
    	this.alphaTo(100, 1, "easeOutExpo");
    	this.thumbHolder._visible = false;
    Code:
    item.onRollOut = function() {
    	this.alphaTo(75, 1, "easeOutExpo");
    	this.thumbHolder._visible = true;
    Also, putting '&' in the attributes of the XML file, can cause problems.

    HTH

  3. #3
    Member
    Join Date
    Jul 2001
    Location
    USA
    Posts
    78
    That worked perfectly! Thanks dawsonk for your help!!
    Thanks!
    Leah5569

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