[RESOLVED] Making The Movieclip loop

[ratanjaiswal]

Hi everyone...I have got this example of drag and throw its working fine..But i need to add some more feature
what code should i add to make this in loop and besides that i want this slide to scroll through numbered buttons..like in this example

http://activeden.net/item/xml-scroll...n_preview/5959


any help will be appriciated
tahnkyou

[Robb@exo]

The provided link seems to end up "Page not found"... maybe check it and repost.

[ratanjaiswal]

http://activeden.net/item/xml-scroll...togallery/5959

this is the link and the code i am using is this i have added the fade in fade out effect but fade out is not working well


stop();
import mx.transitions.Tween;
import mx.transitions.easing.*;

var picSpace = 2000;
var minDist = 6;
var picArray = new Array();
var picTotal = 8;
var holder = this.createEmptyMovieClip("holder", 0);
holder._y = 50;
function doLoadInit(mc) {
var xOffset = 0;
for (i = 0; i < picTotal; i++) {
holder[i]._x = xOffset;
picArray[i][1] = {x1:holder[i]._x, x2:holder[i]._x + holder[i]._width};
xOffset += holder[i]._width + picSpace;
//trace(holder[i]);
}
mc.onPress = doPress;
}
function loadXML(loaded) {
if (loaded) {
var xmlNode = this.firstChild;
picTotal = xmlNode.childNodes.length;
for (i = 0; i < picTotal; i++) {
var picInfo = [xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue];
var p = holder.createEmptyMovieClip(i, i);
my_mcl.loadClip(picInfo[0], p);
picArray.push(picInfo);
}
} else {
content = "file not loaded!";
}
delete xmlNode;
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("dragthrow.xml");
var my_mcl = new MovieClipLoader();
var myListener = new Object();
myListener.onLoadInit = doLoadInit;
my_mcl.addListener(myListener);
//
//holder._alpha = 0; // Start image clip as invisible

function doPress() {
var idex = Number(this._name);
var anchorX = holder._xmouse;
var pressX = _root._xmouse;
holder.onEnterFrame = function() {
this._x = _root._xmouse - anchorX;
};
holder.onMouseUp = function() {
var dist = _root._xmouse - pressX;
var dir = (dist > 0) ? 0 : 1;
dist = Math.abs(dist);
if (dist > minDist) {
var endX = ((dir == 0) ? Stage.width - picArray[idex][1].x2 : 0 - picArray[idex][1].x1) - this._x;
if (dir == 0 && endX < 0 && idex > 0) {
var pictureTweenIn:Tween = new Tween (holder,"_alpha",Normal.easeOut,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
endX = (Stage.width - picArray[idex - 1][1].x2) - this._x;
}
if (dir == 1 && endX > 0 && idex < picTotal - 1) {
var pictureTweenOut:Tween = new Tween (holder,"_alpha",Normal.easeIn,0,100,1,true); // After pause, start fade out
endX = (0 - picArray[idex + 1][1].x1) - this._x;
}
var begX = this._x;
var d = (dist > 60) ? (dist > 180) ? 20 : 40 : 80;
var tc = 0;
this.onEnterFrame = function() {
var t = ++tc;
this._x = endX * ((t = t / d-- - 1) * t * t + 1) + begX;
if (tc == d) {
delete this.onEnterFrame;
}
};
} else {
trace("selected: " + idex);
delete this.onEnterFrame;
}
delete this.onMouseUp;
};
}

thanks

[dawsonk]

button code added to code from first post...

stop();

var picSpace = 10;
var minDist = 8;
var picArray = new Array();
var picTotal = 0;
var holder = this.createEmptyMovieClip("holder", 0);
holder._y = 250;
var btnsX = 0;
var btnsY = 0;

function addButton(num) {
	// movie clip in library with export linage of "btnMC", has dynamic text field instance 'tag'
	var btn = attachMovie("btnMC", num, this.getNextHighestDepth(), {_x:btnsX, _y:btnsY});
	btn.tag.text = num+1;
	btnsX += btn._width+2;
	btn.onPress = doBtnPress;
}
function doBtnPress() {
	var valX = (0-picArray[Number(this._name)][1].x1);
	var dist = valX-holder._x;
	dist = Math.abs(dist);
	var d = (dist>60) ? (dist>180) ? 20 : 40 : 80;
	var tc = 0;
	var begX = holder._x;
	var endX = valX-holder._x
	holder.onEnterFrame = function() {
		var t = ++tc;
		this._x = endX*((t=t/d---1)*t*t+1)+begX;
		if (tc == d) {
			delete this.onEnterFrame;
		}
	};
}
function doLoadInit(mc) {
	var xOffset = 0;
	for (i=0; i<picTotal; i++) {
		holder[i]._x = xOffset;
		picArray[i][1] = {x1:holder[i]._x, x2:holder[i]._x+holder[i]._width};
		xOffset += holder[i]._width+picSpace;
	}
	mc.onPress = doPress;
}

function loadXML(loaded) {
	if (loaded) {
		var xmlNode = this.firstChild;
		picTotal = xmlNode.childNodes.length;
		trace(picTotal);
		for (i=0; i<picTotal; i++) {
			var picInfo = [xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue];
			var p = holder.createEmptyMovieClip(i, i);
			my_mcl.loadClip(picInfo[0],p);
			picArray.push(picInfo);
			addButton(i);
		}
	} else {
		content = "file not loaded!";
	}
	delete xmlNode;
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("dragthrow.xml");
var my_mcl = new MovieClipLoader();
var myListener = new Object();
myListener.onLoadInit = doLoadInit;
my_mcl.addListener(myListener);
//
function doPress() {
	var idex = Number(this._name);
	var anchorX = holder._xmouse;
	var pressX = _root._xmouse;
	holder.onEnterFrame = function() {
		this._x = _root._xmouse-anchorX;
	};
	holder.onMouseUp = function() {
		var dist = _root._xmouse-pressX;
		var dir = (dist>0) ? 0 : 1;
		dist = Math.abs(dist);
		if (dist>minDist) {
			var endX = ((dir == 0) ? Stage.width-picArray[idex][1].x2 : 0-picArray[idex][1].x1)-this._x;
			if (dir == 0 && endX<0 && idex>0) {
				endX = (Stage.width-picArray[idex-1][1].x2)-this._x;
			}
			if (dir == 1 && endX>0 && idex<picTotal-1) {
				endX = (0-picArray[idex+1][1].x1)-this._x; 
			}
			var begX = this._x;
			var d = (dist>60) ? (dist>180) ? 20 : 40 : 80;
			var tc = 0;
			this.onEnterFrame = function() {
				var t = ++tc;
				this._x = endX*((t=t/d---1)*t*t+1)+begX;
				if (tc == d) {
					delete this.onEnterFrame;
				}
			};
		} else {
			trace("selected: "+idex);
			delete this.onEnterFrame;
		}
		delete this.onMouseUp;
	};
}

[ratanjaiswal]

thank you for the code its working great can u explain me how the thing is working and if i want to add fade in and fade out effect to the images..

[dawsonk]

stop();

import mx.transitions.Tween;
import mx.transitions.easing.*;

var picSpace = 10;
var minDist = 8;
var picArray = new Array();
var picTotal = 0;
var holder = this.createEmptyMovieClip("holder", 0);
holder._y = 250;
var btnsX = 0;
var btnsY = 0;

function addButton(num) {
	// movie clip in library with export linage of "btnMC", has dynamic text field instance 'tag'
	var btn = attachMovie("btnMC", num, this.getNextHighestDepth(), {_x:btnsX, _y:btnsY});
	btn.tag.text = num+1;
	btnsX += btn._width+2;
	btn.onPress = doBtnPress;
}
function doBtnPress() {
	var valX = (0-picArray[Number(this._name)][1].x1);
	var dist = valX-holder._x;
	dist = Math.abs(dist);
	var d = (dist>60) ? (dist>180) ? 20 : 40 : 80;
	var tc = 0;
	var begX = holder._x;
	var endX = valX-holder._x;
	new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 0, 1, true);
	holder.onEnterFrame = function() {
		var t = ++tc;
		this._x = endX*((t=t/d---1)*t*t+1)+begX;
		if (tc == d) {
			new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 100, 1, true);
			delete this.onEnterFrame;
		}
	};
}
function doLoadInit(mc) {
	var xOffset = 0;
	for (i=0; i<picTotal; i++) {
		holder[i]._x = xOffset;
		picArray[i][1] = {x1:holder[i]._x, x2:holder[i]._x+holder[i]._width};
		xOffset += holder[i]._width+picSpace;
	}
	mc.onPress = doPress;
}

function loadXML(loaded) {
	if (loaded) {
		var xmlNode = this.firstChild;
		picTotal = xmlNode.childNodes.length;
		trace(picTotal);
		for (i=0; i<picTotal; i++) {
			var picInfo = [xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue];
			var p = holder.createEmptyMovieClip(i, i);
			my_mcl.loadClip(picInfo[0],p);
			picArray.push(picInfo);
			addButton(i);
		}
	} else {
		content = "file not loaded!";
	}
	delete xmlNode;
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("dragthrow.xml");
var my_mcl = new MovieClipLoader();
var myListener = new Object();
myListener.onLoadInit = doLoadInit;
my_mcl.addListener(myListener);
//
function doPress() {
	var idex = Number(this._name);
	var anchorX = holder._xmouse;
	var pressX = _root._xmouse;
	var isMoving = false;
	holder.onEnterFrame = function() {
		this._x = _root._xmouse-anchorX;
		if (Math.abs(pressX-_root._xmouse)>3 && !isMoving) {
			isMoving = true;
			new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 0, 1, true);
		}
	};
	holder.onMouseUp = function() {
		var dist = _root._xmouse-pressX;
		var dir = (dist>0) ? 0 : 1;
		dist = Math.abs(dist);
		if (dist>minDist) {
			var endX = ((dir == 0) ? Stage.width-picArray[idex][1].x2 : 0-picArray[idex][1].x1)-this._x;
			if (dir == 0 && endX<0 && idex>0) {
				endX = (Stage.width-picArray[idex-1][1].x2)-this._x;
			}
			if (dir == 1 && endX>0 && idex<picTotal-1) {
				endX = (0-picArray[idex+1][1].x1)-this._x;
			}
			var begX = this._x;
			var d = (dist>60) ? (dist>180) ? 20 : 40 : 80;
			var tc = 0;
			this.onEnterFrame = function() {
				var t = ++tc;
				this._x = endX*((t=t/d---1)*t*t+1)+begX;
				if (tc == d) {
					new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 100, 1, true);
					delete this.onEnterFrame;
				}
			};
		} else {
			trace("selected: "+idex);
			delete this.onEnterFrame;
		}
		delete this.onMouseUp;
	};
}

What part(s) don't you understand?

[ratanjaiswal]

the part in which you added the buttons actually i want to know the mechanism how it is working

[dawsonk]

Created a movie clip, within it made a dynamic text field, named 'tag'. In the library set it for export, linkage of 'btnMC'. This will allow the code to dynamically load the buttons and give them a number.

stop();

import mx.transitions.Tween;
import mx.transitions.easing.*;

var picSpace = 10;
var minDist = 8;
var picArray = new Array();
var picTotal = 0;
var holder = this.createEmptyMovieClip("holder", 0);
holder._y = 250;
var btnsX = 0;
var btnsY = 0;

function addButton(num) {
	// movie clip in library with export linage of "btnMC", has dynamic text field instance 'tag'
	var btn = attachMovie("btnMC", num, this.getNextHighestDepth(), {_x:btnsX, _y:btnsY});
	// set the dynamic text field to show the number (num starts at zero, so add 1 to it)
	btn.tag.text = num+1;
	// position the buttons horizontally, using the button width plus 2 for spacing
	btnsX += btn._width+2;
	// add a function for when button is pressed
	btn.onPress = doBtnPress;
}
function doBtnPress() {
	// use name of the button pressed to get values from the picArray,
	// need negative value (so subtract from 0), because holder moves left
	// to position the picture.
	var valX = (0-picArray[Number(this._name)][1].x1);
	// computer the distance between current location and desired location
	var dist = valX-holder._x;
	// the rest is pretty much the same as your code for moving the pictures
	dist = Math.abs(dist);
	var d = (dist>60) ? (dist>180) ? 20 : 40 : 80;
	var tc = 0;
	var begX = holder._x;
	var endX = valX-holder._x;
	new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 0, 1, true);
	holder.onEnterFrame = function() {
		var t = ++tc;
		this._x = endX*((t=t/d---1)*t*t+1)+begX;
		if (tc == d) {
			new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 100, 1, true);
			delete this.onEnterFrame;
		}
	};
}
function doLoadInit(mc) {
	var xOffset = 0;
	for (i=0; i<picTotal; i++) {
		holder[i]._x = xOffset;
		picArray[i][1] = {x1:holder[i]._x, x2:holder[i]._x+holder[i]._width};
		xOffset += holder[i]._width+picSpace;
	}
	mc.onPress = doPress;
}

function loadXML(loaded) {
	if (loaded) {
		var xmlNode = this.firstChild;
		picTotal = xmlNode.childNodes.length;
		trace(picTotal);
		for (i=0; i<picTotal; i++) {
			var picInfo = [xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue];
			var p = holder.createEmptyMovieClip(i, i);
			my_mcl.loadClip(picInfo[0],p);
			picArray.push(picInfo);
			// this adds a button for each clip
			addButton(i);
		}
	} else {
		content = "file not loaded!";
	}
	delete xmlNode;
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("dragthrow.xml");
var my_mcl = new MovieClipLoader();
var myListener = new Object();
myListener.onLoadInit = doLoadInit;
my_mcl.addListener(myListener);
//
function doPress() {
	var idex = Number(this._name);
	var anchorX = holder._xmouse;
	var pressX = _root._xmouse;
	var isMoving = false;
	holder.onEnterFrame = function() {
		this._x = _root._xmouse-anchorX;
		if (Math.abs(pressX-_root._xmouse)>3 && !isMoving) {
			isMoving = true;
			new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 0, 1, true);
		}
	};
	holder.onMouseUp = function() {
		var dist = _root._xmouse-pressX;
		var dir = (dist>0) ? 0 : 1;
		dist = Math.abs(dist);
		if (dist>minDist) {
			var endX = ((dir == 0) ? Stage.width-picArray[idex][1].x2 : 0-picArray[idex][1].x1)-this._x;
			if (dir == 0 && endX<0 && idex>0) {
				endX = (Stage.width-picArray[idex-1][1].x2)-this._x;
			}
			if (dir == 1 && endX>0 && idex<picTotal-1) {
				endX = (0-picArray[idex+1][1].x1)-this._x;
			}
			var begX = this._x;
			var d = (dist>60) ? (dist>180) ? 20 : 40 : 80;
			var tc = 0;
			this.onEnterFrame = function() {
				var t = ++tc;
				this._x = endX*((t=t/d---1)*t*t+1)+begX;
				if (tc == d) {
					new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 100, 1, true);
					delete this.onEnterFrame;
				}
			};
		} else {
			trace("selected: "+idex);
			delete this.onEnterFrame;
		}
		delete this.onMouseUp;
	};
}

[ratanjaiswal]

thankyou so much for your help

[ratanjaiswal]

sorry for bothering again..i have one more question i want the images to slide from left to right after a certain intervel of time automatically unless some one drags the image

[dawsonk]

right to left...

stop();

import mx.transitions.Tween;
import mx.transitions.easing.*;

var minDist = 8;
var picArray = new Array();
var picTotal = 0;
var holder = this.createEmptyMovieClip("holder", 0);
holder._y = 250;
var btnsX = 0;
var btnsY = 0;
var timer;
var intID;
var inactiveWaitTime = 8000;
var autoNextTime = 4000;

function resetInactive() {
	clearTimeout(timer);
	timer = setTimeout(autoUpdate, inactiveWaitTime);
}

function autoUpdate() {
	var idex = 0;
	for (i=0; i<picTotal; i++) {
		if (holder._x == 0-picArray[i][1].x1) {
			idex = i;
			break;
		}
	}
	idex++;
	(idex>=picTotal) ? idex=0 : null;
	trace("showing: "+idex);
	doBtnPress(idex);
	clearInterval(intID);
	intID = setInterval(autoUpdate, autoNextTime);
}
function addButton(num) {
	var btn = attachMovie("btnMC", num, this.getNextHighestDepth(), {_x:btnsX, _y:btnsY});
	btn.tag.text = num+1;
	btnsX += btn._width+2;
	btn.onPress = doBtnPress;
}
function doBtnPress(num) {
	resetInactive();
	clearInterval(intID);
	var idex = (num == null) ? Number(this._name) : num;
	var valX = (0-picArray[idex][1].x1);
	var dist = valX-holder._x;
	dist = Math.abs(dist);
	var d = (dist>60) ? (dist>180) ? 20 : 40 : 80;
	var tc = 0;
	var begX = holder._x;
	var endX = valX-holder._x;
	new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 0, 1, true);
	holder.onEnterFrame = function() {
		var t = ++tc;
		this._x = endX*((t=t/d---1)*t*t+1)+begX;
		if (tc == d) {
			this._x = valX;
			new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 100, 1, true);
			delete this.onEnterFrame;
		}
	};
}
function doLoadInit(mc) {
	var xOffset = 0;
	for (i=0; i<picTotal; i++) {
		holder[i]._x = xOffset;
		picArray[i][1] = {x1:holder[i]._x, x2:holder[i]._x+holder[i]._width};
		xOffset += holder[i]._width;
	}
	mc.onPress = doPress;
}

function loadXML(loaded) {
	if (loaded) {
		var xmlNode = this.firstChild;
		picTotal = xmlNode.childNodes.length;
		for (i=0; i<picTotal; i++) {
			var picInfo = [xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue];
			var p = holder.createEmptyMovieClip(i, i);
			my_mcl.loadClip(picInfo[0],p);
			picArray.push(picInfo);
			// this adds a button for each clip
			addButton(i);
		}
	} else {
		content = "file not loaded!";
	}
	resetInactive();
	delete xmlNode;
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("dragthrow.xml");
var my_mcl = new MovieClipLoader();
var myListener = new Object();
myListener.onLoadInit = doLoadInit;
my_mcl.addListener(myListener);
//
function doPress() {
	resetInactive();
	clearInterval(intID);
	var idex = Number(this._name);
	var anchorX = holder._xmouse;
	var pressX = _root._xmouse;
	var isMoving = false;
	holder.onEnterFrame = function() {
		this._x = _root._xmouse-anchorX;
		if (Math.abs(pressX-_root._xmouse)>3 && !isMoving) {
			isMoving = true;
			new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 0, 1, true);
		}
	};
	holder.onMouseUp = function() {
		var dist = _root._xmouse-pressX;
		var dir = (dist>0) ? 0 : 1;
		dist = Math.abs(dist);
		if (dist>minDist) {
			var endX = ((dir == 0) ? Stage.width-picArray[idex][1].x2 : 0-picArray[idex][1].x1)-this._x;
			if (dir == 0 && endX<0 && idex>0) {
				endX = (Stage.width-picArray[idex-1][1].x2)-this._x;
			}
			if (dir == 1 && endX>0 && idex<picTotal-1) {
				endX = (0-picArray[idex+1][1].x1)-this._x;
			}
			var begX = this._x;
			var d = (dist>60) ? (dist>180) ? 20 : 40 : 80;
			var tc = 0;
			this.onEnterFrame = function() {
				var t = ++tc;
				this._x = endX*((t=t/d---1)*t*t+1)+begX;
				if (tc == d) {
					this._x = endX+begX;
					new Tween(holder, "_alpha", Normal.easeOut, holder._alpha, 100, 1, true);
					delete this.onEnterFrame;
				}
			};
		} else {
			trace("selected: "+idex);
			delete this.onEnterFrame;
		}
		delete this.onMouseUp;
	};
}

[ratanjaiswal]

thankyou so much for being so helpful i you are great
thanks again thanks a ton..