LG Vu - Scrolling Icons

Yay, another tutorial. This time, i'll be showing you how to make sliding icons, like this:

<a href="http://www.swfcabin.com/swf-files/1279387672.swf" target="_blank">http://www.swfcabin.com/swf-files/1279387672.swf</a>

1. In a new document, place all your icons on the stage as pictures. Resize them to be relatively small.
2. Convert each one to a movie clip, and set each one's instance name to Icon, and number them like Icon1, Icon2, Icon3, etc.
3. It doesn't matter where they're placed, because in the code, they got placed accordingly.
4. Now, add this code to the layer, after minor editing:

Code:

NumofIcons = 12; //The number of Icons.
WidthBetween = 60; //The width between the icons (60 would mean 4 equal icons on screen at once, 80 would be 3, so on.)
DragLimit = 10; //The max amount the icon can be dragged while still launching the app.
LeftBoundary = WidthBetween / 2; //The farthest the icons can be dragged from the left.
RightBoundary = Stage.width - WidthBetween / 2; //The farthest the icons can be dragged from the right.

var Icons = new Array();
function Init() {
for (i = 1; i <= NumofIcons; i++) {
Icons[i] = this["Icon" + i];
this["Icon" + i]._x = (i * WidthBetween) - WidthBetween / 2;
this["Icon" + i]._y = 380; //You can set this to whatever your y should be,
//or remove this and the preceding line if the icons are already in place.
}
}

function AddHandlers() {
for (I = 1; I < Icons.length; I++) {
this["Icon" + I].onPress = function() {
platform.touch_sound();
platform.setDepth(1);
CurPos = this._x;
Drag = true;
CurIcon = this;
Set = true;
};
this["Icon" + I].onRelease = this["Icon" + I].onReleaseOutside = function () {
NewPos = this._x;
Drag = false;
if (Math.abs(CurPos - NewPos) < DragLimit) {
LaunchApp(CurIcon);
}
};
}
}

Array.prototype.indexOf = function(value) {
var i = 0;
var len = this.length;
var res = -1;
for (i; i < len; i++) {
if (this[i] == value) {
res = i;
break;
}
}
return res;
};

onEnterFrame = function () {
if (Drag) {
if ((Icons[1]._x > LeftBoundary) | (Icons[Icons.length - 1]._x < RightBoundary)) {
Drag = false;
}
if (Set) {
MouseOffset = CurIcon._x - this._xmouse;
Set = false;
}
CurIcon._x = this._xmouse + MouseOffset;
Index = Icons.indexOf(CurIcon);
for (IconDrag = 2; IconDrag < Icons.length; IconDrag++) {
if (IconDrag <= Index) {
OtherIcon = IconDrag - 1;
this["Icon" + OtherIcon]._x = CurIcon._x + (-(Index - (IconDrag - 1)) * WidthBetween);
} else {
OtherIcon = IconDrag;
this["Icon" + OtherIcon]._x = CurIcon._x + ((IconDrag - Index) * WidthBetween);
}
}
} else {
if ((Icons[1]._x <= LeftBoundary) & (Icons[Icons.length - 1]._x >= RightBoundary)) {
if (CurIcon._x % WidthBetween > 1) {
if (CurIcon._x % WidthBetween <= WidthBetween / 2) {
Target = (-CurIcon._x % WidthBetween);
Target += WidthBetween / 2;
} else {
Target = ((WidthBetween - (CurIcon._x % WidthBetween)));
Target -= WidthBetween / 2;
}
for (IconSnap = 1; IconSnap < Icons.length; IconSnap++) {
Icons[IconSnap]._x = Icons[IconSnap]._x + Target;
}
}
} else {
if (Icons[1]._x > LeftBoundary) {
ToLeft = Icons[1]._x - LeftBoundary;
for (IconSnap = 1; IconSnap < Icons.length; IconSnap++) {
Icons[IconSnap]._x = Icons[IconSnap]._x - ToLeft;
CurPos = 0
}
} else {
ToRight = Icons[Icons.length - 1]._x - RightBoundary;
for (IconSnap = 1; IconSnap < Icons.length; IconSnap++) {
Icons[IconSnap]._x = Icons[IconSnap]._x - ToRight;
CurPos = 0
}
}
}
}
onMouseMove = function () {
updateAfterEvent;
};
};

Now, for the editing:

Code:

Id = Array();
Name = Array();

In the Id array, add the ids of your icons in order, like:
Id = Array("1,1", "1,4"), etc.
In the Name array, do the same, but add the names in order, like:
Name = Array("FLDialpad", "Message"), etc.

And finally:

Code:

function LaunchApp(appname) {
Caller = appname._name;
appnum = Number(Caller.slice(4, 6)) - 1;
platform.setDepth(1);
eventCall(Id[appnum],Name[appnum]);
}

Init();
AddHandlers();

Line by Line

Code:

NumofIcons = 12; //The number of Icons.
WidthBetween = 60;
DragLimit = 10;
LeftBoundary = WidthBetween / 2;
RightBoundary = Stage.width - WidthBetween / 2;

This sets all the variables that will be referenced later in the code.

Code:

var Icons = new Array();
function Init() {
for (i = 1; i <= NumofIcons; i++) {
Icons[i] = this["Icon" + i];
this["Icon" + i]._x = (i * WidthBetween) - WidthBetween / 2;
this["Icon" + i]._y = 380;
}
}

Declare a function that creates an array of all the icons and sets the positions of them.

Code:

function AddHandlers() {
for (I = 1; I < Icons.length; I++) {
this["Icon" + I].onPress = function() {

Declare a function, and for each icon, set it's "onPress" function.

Code:

platform.touch_sound();
platform.setDepth(1);
CurPos = this._x;
Drag = true;
CurIcon = this;
Set = true;

Make the phone vibrate, and set all the variables for the icons.

Code:

this["Icon" + I].onRelease = this["Icon" + I].onReleaseOutside = function () {
NewPos = this._x;
Drag = false;
if (Math.abs(CurPos - NewPos) < DragLimit) {
LaunchApp(CurIcon);
}
};
}
}

For each icon, set their "onRelease" and "onReleaseOutside" functions. In the functions, set their variables. If the distance is moved, isn't that far, launch the icon.

Code:

Array.prototype.indexOf = function(value) {
var i = 0;
var len = this.length;
var res = -1;
for (i; i < len; i++) {
if (this[i] == value) {
res = i;
break;
}
}
return res;
};

Make a function to get the index of something in an array.

Code:

onEnterFrame = function () {
if (Drag) {
if ((Icons[1]._x > LeftBoundary) | (Icons[Icons.length - 1]._x < RightBoundary)) {
Drag = false;
}

On each frame, check to see if the icons are past the boundaries. If they are, stop dragging them.

Code:

if (Set) {
MouseOffset = CurIcon._x - this._xmouse;
Set = false;
}

If it's the first time, set the offset.

Code:

CurIcon._x = this._xmouse + MouseOffset;
Index = Icons.indexOf(CurIcon);
for (IconDrag = 2; IconDrag < Icons.length; IconDrag++) {

Move the current icons, and get it's index. For each icon, do...

Code:

if (IconDrag <= Index) {
OtherIcon = IconDrag - 1;
this["Icon" + OtherIcon]._x = CurIcon._x + (-(Index - (IconDrag - 1)) * WidthBetween);
} else {
OtherIcon = IconDrag;
this["Icon" + OtherIcon]._x = CurIcon._x + ((IconDrag - Index) * WidthBetween);
}

Get every icon except for the one being clicked.

Code:

} else {
if ((Icons[1]._x <= LeftBoundary) & (Icons[Icons.length - 1]._x >= RightBoundary)) {
if (CurIcon._x % WidthBetween > 1) {

If it's not past the boundaries, and the icons are more than 1 unit away from their snapped positions

Code:

if (CurIcon._x % WidthBetween <= WidthBetween / 2) {
Target = (-CurIcon._x % WidthBetween);
Target += WidthBetween / 2;
} else {
Target = ((WidthBetween - (CurIcon._x % WidthBetween)));
Target -= WidthBetween / 2;
}

Get which side of the lines the current icon is closer to.

Code:

for (IconSnap = 1; IconSnap < Icons.length; IconSnap++) {
Icons[IconSnap]._x = Icons[IconSnap]._x + Target;
}
}

for each icon, move it to it's snapped position.

Code:

} else {
if (Icons[1]._x > LeftBoundary) {
ToLeft = Icons[1]._x - LeftBoundary;
for (IconSnap = 1; IconSnap < Icons.length; IconSnap++) {
Icons[IconSnap]._x = Icons[IconSnap]._x - ToLeft;
CurPos = 0
}

If it's past the left boundary, snap it back.

Code:

} else {
ToRight = Icons[Icons.length - 1]._x - RightBoundary;
for (IconSnap = 1; IconSnap < Icons.length; IconSnap++) {
Icons[IconSnap]._x = Icons[IconSnap]._x - ToRight;
CurPos = 0
}
}

Do the same thing for the right.

Code:

function LaunchApp(appname) {
Caller = appname._name;
appnum = Number(Caller.slice(4, 6)) - 1;
platform.setDepth(1);
eventCall(Id[appnum],Name[appnum]);
}

Init();
AddHandlers();

Declare a function that returns the name and Id of the thing the icon launches. Finally, do the first 2 functions.