Image Swap Using Xml / Actionscript 2.0
I'm loading in images into my swf using a combination of actionscript & xml. Does anyone know how i'd be able to create this effect? I'd ike for if the user rolls over a bw image it swaps out to a color image. I tried using a solution some gave me a week or so ago but it doesn't seem to work with my current actionscript. Anyone able to help with this?
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:
//you can modify the fellow code:
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 useing mouse Coordinates you can set scroll bar hid or not. false mean hid.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;
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);
maskedView.ySlideTo(startNavY,2,"easeOutExpo",0);
contentMain.ySlideTo(startNavY,2,"easeOutExpo",0,startScrolling);
arrowUp.alphaTo(100,1,"easeOutExpo",2);
arrowDown.alphaTo(100,1,"easeOutExpo",2);
} 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 = 1;
//you can modify easing speed.
var easingSpeed = 20;
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
//+++++++++++++++++++++++++++++++++++++++++++
function navTransitionOut():Void {
this.xSlideTo(-617,1,"easeOutExpo");
}
function navTransitionIn():Void {
this.xSlideTo(0,1,"easeOutExpo",delay);
}
function fadeOutMainImage():Void {
if (detailImage_mc._alpha > 0) {
detailImage_mc.alphaTo(0,1,"easeOutExpo",0, selectItem);
} else {
selectItem();
}
}
function selectItem():Void {
startPreload(selectedItem.contentinfo);
}
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>tradervics.swf</content>
</list>
<list name="Trader Vic's" link="Scottsdale, AZ" >
<thumb>portfolio/p2bw.jpg</thumb>
<content>contentpic/tradervics.swf</content>
</list>
<list name="Salobre Resort & Spa" link="Gran Canaria Island, Spain" >
<thumb>portfolio/p3bw.jpg</thumb>
<content>contentpic/salobreresort.swf</content>
</list>
<list name="Boulders" link="Carefree, AZ" >
<thumb>portfolio/p4bw.jpg</thumb>
<content>contentpic/boulders.swf</content>
</list>
<list name="Warm Springs Ranch" link="Ketchum, ID" >
<thumb>portfolio/p5bw.jpg</thumb>
<content>contentpic/warmspringsranch.swf</content>
</list>
<list name="Kimberlee" link="Scottsdale, AZ" >
<thumb>portfolio/p6bw.jpg</thumb>
<content>contentpic/kimberlee.swf</content>
</list>
<list name="Bighorn" link="Palm Desert, CA" >
<thumb>portfolio/p7bw.jpg</thumb>
<content>contentpic/bighorn.swf</content>
</list>
<list name="Southbridge Mixed-Use" link="Scottsdale, AZ" >
<thumb>portfolio/p8bw.jpg</thumb>
<content>contentpic/southbridge.swf</content>
</list>
<list name="Maravilla" link="Scottsdale, AZ" >
<thumb>portfolio/p9bw.jpg</thumb>
<content>contentpic/maravilla.swf</content>
</list>
<list name="CANAL" link="Scottsdale, AZ" >
<thumb>portfolio/p10bw.jpg</thumb>
<content>contentpic/canal.swf</content>
</list>
<list name="Pinnacle View" link="Scottsdale, AZ" >
<thumb>portfolio/p11bw.jpg</thumb>
<content>contentpic/pinnacleview.swf</content>
</list>
<list name="Mountain Vista" link="Scottsdale, AZ" >
<thumb>portfolio/p12bw.jpg</thumb>
<content>contentpic/mountainvista.swf</content>
</list>
<list name="Valley Ho" link="Scottsdale, AZ" >
<thumb>portfolio/p13bw.jpg</thumb>
<content>contentpic/valleyho.swf</content>
</list>
<list name="Montelucia" link="Paradise Valley, AZ" >
<thumb>portfolio/p14bw.jpg</thumb>
<content>contentpic/montelucia.swf</content>
</list>
<list name="Hops" link="Scottsdale, AZ" >
<thumb>portfolio/p15bw.jpg</thumb>
<content>contentpic/hops.swf</content>
</list>
<list name="Bridge House" link="Scottsdale, AZ" >
<thumb>portfolio/p16bw.jpg</thumb>
<content>contentpic/bridgehouse.swf</content>
</list>
<list name="Fairmont Scottsdale" link="Scottsdale, AZ" >
<thumb>portfolio/p17bw.jpg</thumb>
<content>contentpic/fairmont.swf</content>
</list>
<list name="Grandview at Las Vegas" link="Las Vegas, NV" >
<thumb>portfolio/p18bw.jpg</thumb>
<content>contentpic/grandview.swf</content>
</list>
<list name="Grand Central Hotel" link="Durango, Colorado" >
<thumb>portfolio/p19bw.jpg</thumb>
<content>contentpic/grandcentralhotel.swf</content>
</list>
<list name="Sanctuary Resort & Spa" link="Paradise Valley, AZ" >
<thumb>portfolio/p1bw.jpg</thumb>
<content>contentpic/sanctuary.swf</content>
</list>
<list name="Trader Vic's" link="Scottsdale, AZ" >
<thumb>portfolio/p2bw.jpg</thumb>
<content>contentpic/tradervics.swf</content>
</list>
<list name="Salobre Resort & Spa" link="Gran Canaria Island, Spain" >
<thumb>portfolio/p3bw.jpg</thumb>
<content>contentpic/salobreresort.swf</content>
</list>
</item>
TRACKER
