Scroll and drag/drop HELP Pls

[picklejar]

Ok I am nearly there.

What is throwing a spanner in the works is that when I drag an _mc onto the canvas it removes it from tArray, you can continue to scroll the images contained in tArray fine, however, when you drag an _mc off the canvas and it is pushed back into tArray the _mc is put back into its original position on the stage.

This causes a problem in that images are in that _mc's coordinates, continuing down this route puts images all over the place !!??!!

I am completely lost on this one any help would be appreciated, this is doing my head in. The .fla can be downloaded from:

scroll.fla (http://www.picklejarrecordings.com/vars/oldnews/)

The code is as follows:

Ta Simon

Attach Code

import mx.transitions.*;
import mx.transitions.easing.*;
// BUILD DEFAULT TITLES ARRAY
titles = [];
titles.push ("0");
titles.push ("1");
titles.push ("2");
titles.push ("3");
titles.push ("4");
titles.push ("5");
titles.push ("6");
titles.push ("7");
//==================
// STOP THINGS ON PAGE 1
content_mc.stop ();
//==================
//build icons from each img on key frames in icon mc
show = [];
_global.nameOf = new Object ();
function buildIconList () {
var spacing:Number = 100;
var iconY:Number = 290;
var iconX:Number = 60;
//Creates a parent movie clip to hold the container
this.createEmptyMovieClip ("mc_1", 0);
//creates a child movie clip inside of "mc_1"
mc_1.attachMovie ("contentmc", "content_mc", 1);
mc_1.attachMovie ("maskMC", "mask_mc", 2);
mc_1.mask_mc._x = 238;
mc_1.mask_mc._y = 260;
mc_1.content_mc._x = -138;
mc_1.content_mc._y = 860;
mc_1.content_mc.stop ();
mc_1.content_mc._height = 60;
mc_1.content_mc._width = 80;
for (var i = 0; i < mc_1.content_mc._totalframes; ++i) {
var newName:String = "icon_mc" + i;
var clip:MovieClip = mc_1.content_mc.duplicateMovieClip (newName, 10000 + i);
clip.setMask (mc_1.mask_mc);
show.push (clip);
clip.gotoAndStop (i + 1);
clip._y = iconY;
clip._x = iconX + i * spacing;
clip.homeX = clip._x;
clip.homeY = clip._y;
clip._alpha = 80;
clip.icon_btn.onPress = function () {
removeImage (this._parent);
startDrag (this._parent);
title_txt.text = titles[this._parent._currentframe - 1];
};
clip.icon_btn.onRollOver = function () {
this._parent._alpha = 100;
this._parent._height = 80;
this._parent._width = 100;
};
clip.icon_btn.onRollOut = function () {
this._parent._alpha = 80;
this._parent._height = 60;
this._parent._width = 80;
};
clip.icon_btn.onRelease = function () {
iconReleased (this._parent);
stopDrag ();
};
}
}
buildIconList ();
//==================
function iconReleased (icon:MovieClip) {
if (eval (icon._droptarget) != _root.canvas_mc) {
icon._x = icon.homeX;
icon._y = icon.homeY;
addImage (icon);
}
}
//==================
var tArray:Array = show.slice ();
//function to remove elements of array
function removeImage (clip) {
for (var j = 0; j <= tArray.length; j++) {
if (clip == tArray[j]) {
tArray.splice (j, 1);
break;
}
}
}
function addImage (clip) {
tArray.push (clip);
tArray.sort ();
}
//==================
// tween more mc's in an array
function buildMCArray (step:Number, direction:String):Array {
var tween_array:Array = new Array ();
switch (direction) {
case "right" :
tween_array.push ({mc:tArray[0], xPos:tArray[0]._x, newXPos:tArray[0]._x + step});
tween_array.push ({mc:tArray[1], xPos:tArray[1]._x, newXPos:tArray[1]._x + step});
tween_array.push ({mc:tArray[2], xPos:tArray[2]._x, newXPos:tArray[2]._x + step});
tween_array.push ({mc:tArray[3], xPos:tArray[3]._x, newXPos:tArray[3]._x + step});
tween_array.push ({mc:tArray[4], xPos:tArray[4]._x, newXPos:tArray[4]._x + step});
tween_array.push ({mc:tArray[5], xPos:tArray[5]._x, newXPos:tArray[5]._x + step});
tween_array.push ({mc:tArray[6], xPos:tArray[6]._x, newXPos:tArray[6]._x + step});
tween_array.push ({mc:tArray[7], xPos:tArray[7]._x, newXPos:tArray[7]._x + step});
return tween_array;
break;
case "left" :
tween_array.push ({mc:tArray[0], xPos:tArray[0]._x, newXPos:tArray[0]._x - step});
tween_array.push ({mc:tArray[1], xPos:tArray[1]._x, newXPos:tArray[1]._x - step});
tween_array.push ({mc:tArray[2], xPos:tArray[2]._x, newXPos:tArray[2]._x - step});
tween_array.push ({mc:tArray[3], xPos:tArray[3]._x, newXPos:tArray[3]._x - step});
tween_array.push ({mc:tArray[4], xPos:tArray[4]._x, newXPos:tArray[4]._x - step});
tween_array.push ({mc:tArray[5], xPos:tArray[5]._x, newXPos:tArray[5]._x - step});
tween_array.push ({mc:tArray[6], xPos:tArray[6]._x, newXPos:tArray[6]._x - step});
tween_array.push ({mc:tArray[7], xPos:tArray[7]._x, newXPos:tArray[7]._x - step});
return tween_array;
break;
}
}
// function to tween all mc's in the array
function tweenMCarray (step:Number, direction:String):Void {
targets = buildMCArray (step, direction);
for (i = 0; i < targets.length; i++) {
tweenMC (targets[i].mc, targets[i].xPos, targets[i].newXPos);
}
}
// this function tweens one mc
function tweenMC (target_mc:MovieClip, xPos:Number, newXPos:Number):Void {
new Tween (target_mc, "_x", Strong.easeIn, xPos, newXPos, 2, true);
}
// move the mc's in the array
btn_left.onRelease = function () {
tweenMCarray (150, "left");
trace ("left");
};
btn_right.onRelease = function () {
tweenMCarray (150, "right");
};

[picklejar]

Ok I don't think it is actually gonna work, if someone drags and drops onto the canvas say mc 6 hypothetically with starting x coordinates of 300, to get to mc 6 in the first place you would have had to scroll the images along thus changing the x coordinates of the mc (in fact all the mc's) so when it comes to dragging it off the canvas back into the array then it is going back to its original coordinates which now have another mc residing in its place.

Maybe if I get the last img in the array's _x coordinates and when add an img back into the array define the last imgs coordinates plus an amount to ensure a gap and no overlap

What I need to find out then is if an mc is taken out of the array, how could I get all the images to the right to shift across and take up its space eliminating the gap left behind, I can then just add images to the end of the line of images?

[madgett]

It's harder than it should be. What you should try doing is creating a container movieclip that has all 8 of those squares in it. Then when the user clicks the left/right buttons you just move the container clip right or left. Now when they want to put a square back, it's easy, you just return the square back to it's only spot inside the container movieclip, no fancy calculations...see what I mean?

[picklejar]

yeh see what you mean, just had difficulties trying to work out how to do it that way. Cheers mate