dcsimg
A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: Need help with xml & as2

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

    Need help with xml & as2

    I've got a gallery of images that are black and white. If you rollover the image I want the black & white image to be replaced with the color version. I had it working in a different gallery but can't seem to get it happening in my new gallery. Can anyone help...please. Sorry my actionscript knowledge is somewhat limited and my file is a bit of rats nest due to my trial and error approach.


    Here's my actionscript:
    Code:
    //#include "mc_tween2.as"
    stop();
    System.useCodepage = true;
    Stage.scaleMode = "noScale";
    
    var owner = this;
    var selectedItem:MovieClip;
    // set up initial values
    var startNavY:Number = maskedView._y;
    maskedView._y = contentMain._y = -maskedView._height;
    arrowUp._alpha = arrowDown._alpha = 0;
    
    //useage:
    var easing = true;
    //true or false mean easing or not.
    var auto = false;
    //true or false mean autoscroll or not
    var mouseWheel = true;
    //true or fale mean support mousewheel or not.
    var mouseCoord = true;
    //true or false mean use mouse coordinates or not.
    var barVisual = true;
    //when using mouse Coordinates you can set scroll bar hide or not. false mean hide.Note:If you
    //didn't use mouse coordinates and set barVisual = false.you will only use mouseWheel scroll
    //content.
    var space = 25;
    //between list item space .
    var path = "list.xml";//xml path
    contentHolder_mc.contentinfo.html = true;
    contentHolder_mc.contentinfo.multiline = true;
    contentHolder_mc.contentinfo.wordWrap = true;
    var thumbarray:Array = new Array();
    //movieclip loader object
    var mcl_listener = new Object();
    loader = new MovieClipLoader();
    loader.addListener(mcl_listener);
    var myxml = new XML();
    myxml.ignoreWhite = true;
    myxml.onLoad = function(success) {
    	var item = this.firstChild.childNodes;
    	if (success) {
    		for (var i:Number = 0; i<item.length; i++) {
    			
    			var temp_mc = contentMain.attachMovie("item", "item"+i, i);
    			temp_mc._y += i*(temp_mc._height+space);
    			contentMain.back_mc._height = i*(temp_mc._height+space);
    			temp_mc.tname = item[i].attributes.name;
    			temp_mc.tlink = item[i].attributes.link;
    			temp_mc.thumb = item[i].firstChild.firstChild.nodeValue;
    			temp_mc.contentinfo = item[i].childNodes[1].firstChild.nodeValue;
    			temp_mc.item_txt.text = temp_mc.tname;
    			temp_mc.descr_txt.text = temp_mc.tlink;
    			thumbarray.push(temp_mc.thumb);
    			
    			//temp_mc.item_thumb.loadMovie(temp_mc.contentinfo);
    			loader.loadClip((thumbarray[i]),temp_mc.item_thumb);
    			//contentHolder_mc.contentinfo.htmlText = item[0].childNodes[1].firstChild.nodeValue;
    			temp_mc.onRelease = function() {
    				owner.selectedItem = this;
    				owner.fadeOutMainImage();
    			};
    			
    		}
    		//contentMain.item0.onRelease();
    		//startPreload(item[0].childNodes[1].firstChild.nodeValue);
    		// Do the transition in stuff
    		detailImage_mc.alphaTo(100,2,"linear",0);
    		maskedView.ySlideTo(startNavY,2,"easeOutExpo",0);
    		contentMain.ySlideTo(startNavY,2,"easeOutExpo",0);
    		arrowUp.alphaTo(100,1,"easeOutExpo",2);
    		arrowDown.alphaTo(100,1,"easeOutExpo",2,startScrolling);
    	} else {
    		trace("error");
    	}
    };
    function startScrolling():Void {
    	scrolling(easing, auto, mouseWheel, mouseCoord, barVisual);
    }
    myxml.load(path);
    contentMain.createEmptyMovieClip("back_mc", this.getNextHighestDepth());
    contentMain.setMask(maskedView);
    function scrolling(easing, auto, mouse) {
    	//you can modify scroll speed.
    	var moveSpeed = -100;
    	//you can modify easing speed.
    	var easingSpeed = 5;
    	var scrollHeight = scrollbg._height;
    	//you donnot need modify the fellowing code.if you are a AS coder you can do .
    	var scrollable = contentMain._height-maskedView._height+2;
    	var top_scroll = contentMain._y;
    	var left = scrollbg._x-2;
    	var top = scrollbg._y;
    	var right = scrollbg._x-2;
    	var bottom = scrollbg._y+scrollbg._height-dragger._height;
    	if (scrollable<0) {
    		dragger._visible = false;
    		btnup._alpha = 0;
    		btndown._alpha = 0;
    		scrollbg._alpha = 0;
    		btnup.enabled = false;
    		btndown.enabled = false;
    		return;
    	}
    	//update scroll content.              
    	function updateContentPos() {
    		var percent_scrolled = (dragger._y-btnup._y-btnup._height)/(scrollHeight-dragger._height);
    		contentMain.newY = Math.round(top_scroll-(scrollable*percent_scrolled));
    		//trace(contentMain.newY);
    	}
    	contentMain.onEnterFrame = function() {
    		if (!easing || easing == undefined) {
    			this._y = this.newY;
    		} else {
    			var diff:Number = this.newY-this._y;
    			this._y += (diff)/easingSpeed;
    		}
    	};
    	//dragger function
    	dragger.onPress = function() {
    		startDrag(this, false, left, top, right, bottom);
    		this.onMouseMove = function() {
    			updateContentPos();
    		};
    	};
    	dragger.onRelease = dragger.onReleaseOutside=function () {
    		stopDrag();
    		delete this.onEnterFrame;
    	};
    	btnup.onPress = function() {
    		this.onEnterFrame = function() {
    			dragger._y = Math.max(top, dragger._y-moveSpeed);
    			updateContentPos();
    		};
    	};
    	btnup.onRelease = function() {
    		delete this.onEnterFrame;
    	};
    	btndown.onPress = function() {
    		this.onEnterFrame = function() {
    			dragger._y = Math.min(bottom, dragger._y+moveSpeed);
    			updateContentPos();
    		};
    	};
    	btndown.onRelease = function() {
    		delete this.onEnterFrame;
    	};
    	updateContentPos();
    	//++++++++++++++++++++++++++++++++++++++++++ 
    	//AutoScroll code 
    	if (auto == true) {
    		onEnterFrame = function () {
    			if (dragger._y<bottom) {
    				dragger._y = dragger._y+0.3;
    				updateContentPos();
    			} else {
    				dragger._y = top;
    			}
    		};
    	}
    	//+++++++++++++++++++++++++++++++++++++++++++            
    	//mouseWheel code
    	if (mouseWheel == true) {
    		var mouseListener = new Object();
    		mouseListener.onMouseWheel = function(delta) {
    			if (dragger._y<bottom) {
    				dragger._y += delta+3;
    				updateContentPos();
    			} else {
    				dragger._y = bottom-3;
    			}
    			if (dragger._y>top) {
    				dragger._y += delta;
    				updateContentPos();
    			} else {
    				dragger._y = top;
    			}
    		};
    		Mouse.addListener(mouseListener);
    	}
    	//++++++++++++++++++++++++++++++++++++++++++++          
    	//Mouse coordinate 
    	if (mouseCoord == true) {
    		maskedView.onEnterFrame = function() {
    			//trace(this.hitTest(_xmouse, _ymouse, false));
    			if (this.hitTest(_xmouse, _ymouse, false)) {
    				dragger._y = _ymouse;
    				if (dragger._y < top + 50) {
    					dragger._y = top;
    				}
    				updateContentPos();
    				if (dragger._y>bottom) {
    					dragger._y = bottom;
    					updateContentPos();
    				}
    			}
    		};
    	}
    	//+++++++++++++++++++++++++++++++++++++++++++  
    	//scroll bar hid setup
    	if (barVisual == false) {
    		dragger._visible = false;
    		btnup._alpha = 0;
    		btndown._alpha = 0;
    		scrollbg._alpha = 0;
    		btnup.enabled = false;
    		btndown.enabled = false;
    	}
    	//+++++++++++++++++++++++++++++++++++++++++++  
    }
    
    //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    //movie clip loader preloader
    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    mcl_listener.onLoadInit=function(target){
    	//when image laoder set its width and high.
    	//target._width =60;
    	//target._height=52;
    	
    	
    }
    mcl_listener.onLoadStart=function(target) {
    	target._parent.attachMovie("preloader anim", "preloader_mc", 500, {_x:25, _y:25});
    }
    mcl_listener.onLoadProgress=function(target, bytes_loaded, bytes_total) {
    	target._visible = false;
    	target._alpha = 0;
    	target._parent.preloader_mc.value = bytes_loaded/bytes_total;
    }
    mcl_listener.onLoadComplete=function(target) {
    	trace("complete");
    	// show content
    	target._visible = true;
    	target.onEnterFrame = fadeIn;
    	target._parent.preloader_mc._visible = 0;
    }
    
    //+++++++++++++++++++++++++++++++++++++++++++
    // PC :: 12/13/08
    // Transition the scrolling nav in and out
    //+++++++++++++++++++++++++++++++++++++++++++
    var intervalId:Number;
    function navTransitionOutBegin():Void {
    	intervalId = setInterval(this,"navTransitionOut",750);
    }
    
    function navTransitionOut():Void {
    	clearInterval(intervalId);
    	this.xSlideTo(-617,1,"easeOutExpo", delay);
    }
    
    function navTransitionIn():Void {
    	this.xSlideTo(0,1,"easeOutExpo",delay);
    }
    
    function fadeOutMainImage():Void {
    	if (detailImage_mc._alpha > 0) {
    		detailImage_mc.alphaTo(0,2,"easeOutExpo",0, selectItem);
    	} else {
    		selectItem();
    	}
    }
    
    function selectItem():Void {
    	startPreload(selectedItem.contentinfo);
    }

    Here's the xml:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <item>
       <list name="Sanctuary Resort & Spa" link="Paradise Valley, AZ" >
           <thumb>portfolio/p1bw.jpg</thumb>
           <content>sanctuary.swf</content>
       </list>
       <list name="Trader Vic's" link="Scottsdale, AZ" >
           <thumb>portfolio/p2bw.jpg</thumb>
           <content>tradervics.swf</content>
       </list>
       <list name="Salobre Resort & Spa" link="Gran Canaria Island, Spain" >
           <thumb>portfolio/p3bw.jpg</thumb>
           <content>salobreresort.swf</content>
       </list>
       <list name="Boulders" link="Carefree, AZ" >
           <thumb>portfolio/p4bw.jpg</thumb>
           <content>boulders.swf</content>
       </list>
       <list name="Warm Springs Ranch" link="Ketchum, ID" >
           <thumb>portfolio/p5bw.jpg</thumb>
           <content>warmspringsranch.swf</content>
       </list>
       <list name="Kimberlee" link="Scottsdale, AZ" >
           <thumb>portfolio/p6bw.jpg</thumb>
           <content>kimberlee.swf</content>
       </list>
       <list name="Bighorn" link="Palm Desert, CA" >
           <thumb>portfolio/p7bw.jpg</thumb>
           <content>bighorn.swf</content>
       </list>
       <list name="Southbridge Mixed-Use" link="Scottsdale, AZ" >
           <thumb>portfolio/p8bw.jpg</thumb>
           <content>southbridge.swf</content>
       </list>
       <list name="Maravilla" link="Scottsdale, AZ" >
           <thumb>portfolio/p9bw.jpg</thumb>
           <content>maravilla.swf</content>
       </list>
       <list name="CANAL" link="Scottsdale, AZ" >
           <thumb>portfolio/p10bw.jpg</thumb>
           <content>canal.swf</content>
       </list>
       <list name="Pinnacle View" link="Scottsdale, AZ" >
           <thumb>portfolio/p11bw.jpg</thumb>
           <content>pinnacleview.swf</content>
       </list>
       <list name="Mountain Vista" link="Scottsdale, AZ" >
           <thumb>portfolio/p12bw.jpg</thumb>
           <content>mountainvista.swf</content>
       </list>
       <list name="Valley Ho" link="Scottsdale, AZ" >
           <thumb>portfolio/p13bw.jpg</thumb>
           <content>valleyho.swf</content>
       </list>
       <list name="Montelucia" link="Paradise Valley, AZ" >
           <thumb>portfolio/p14bw.jpg</thumb>
           <content>montelucia.swf</content>
       </list>
       <list name="Hops" link="Scottsdale, AZ" >
           <thumb>portfolio/p15bw.jpg</thumb>
           <content>hops.swf</content>
       </list>
       <list name="Bridge House" link="Scottsdale, AZ" >
           <thumb>portfolio/p16bw.jpg</thumb>
           <content>bridgehouse.swf</content>
       </list>
       <list name="Fairmont Scottsdale" link="Scottsdale, AZ" >
           <thumb>portfolio/p17bw.jpg</thumb>
           <content>fairmont.swf</content>
       </list>
       <list name="Grandview at Las Vegas" link="Las Vegas, NV" >
           <thumb>portfolio/p18bw.jpg</thumb>
           <content>grandview.swf</content>
       </list>
       <list name="Grand Central Hotel" link="Durango, Colorado" >
           <thumb>portfolio/p19bw.jpg</thumb>
           <content>grandcentralhotel.swf</content>
    	</list>   
     	<list name="Sanctuary Resort & Spa" link="Paradise Valley, AZ" >
           <thumb>portfolio/p1bw.jpg</thumb>
           <content>sanctuary.swf</content>
       </list>
    	<list name="Trader Vic's" link="Scottsdale, AZ" >
           <thumb>portfolio/p2bw.jpg</thumb>
           <content>tradervics.swf</content>
       </list>
       <list name="Salobre Resort & Spa" link="Gran Canaria Island, Spain" >
           <thumb>portfolio/p3bw.jpg</thumb>
           <content>salobreresort.swf</content>
       </list>
    </item>
    Thanks!
    Leah5569

  2. #2
    :
    Join Date
    Dec 2002
    Posts
    3,518

    Maybe you can adapt this to what you are trying to do...

    If the color jpgs are in the same location ('portfolio') as the b&w jpgs AND they have the same name, minus the 'bw'. (p1.jpg, p1bw.jpg)

    In the library, open the mc 'item'. Make a new layer under the one that contains 'item_thumb'. Copy the mc 'item_thumb' and place in place in this new layer. Name the instance 'item_thumb_clr'.

    Add the following code, below the existing line....loader.loadClip((thumbarray[i]), temp_mc.item_thumb);

    Code:
    var tmp = temp_mc.thumb.split("bw");
    temp_mc.item_thumb_clr.loadMovie(tmp[0] + tmp[1]);
    temp_mc.onRollOver = function() {
    	this.item_thumb._alpha = 0;
    	this.onRollOut = function() {
    		this.item_thumb._alpha = 100;
    	};
    };
    If this works, then change the alpha assignments to fade transitions....

    HTH

  3. #3
    Member
    Join Date
    Jul 2001
    Location
    USA
    Posts
    78
    That did the trick! Thank you so much.
    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