Picture Sliding

[jbum]

I had an idea for how this might work.

Paste the following script into the first frame of an empty movie, to try it out.

The basic idea is start with a script which arranges the movies linearly, as if viewing a film strip. The pictures are modelled as being on a spinning wheel or film strip.

I then use a power function (Math.pow) to stretch the _x position so that as it gets further from the center, the distance increases exponentially.

code:

---

// In this version, colored rectangles stand in for the pictures



// We use this to keep track of the number of pictures

// the pictures are modelled as being on a wheel which has this many

// slots

kNbrPictures = 10;



// Image Sizes

kPictureWidth = 120;

kPictureHeight = 80;



// This is the minimum horizontal space used to display a picture

kCellWidth = kPictureWidth + 20;



// These numbers affect positioning and mouse

// sensitivity

kStretchFactor	= 2;

kStretchSensitivity = 0.8;

kMouseSensitivity = .001;



// Center of the stage - used for positioning

CX = Stage.width/2;



// Current position on the picture wheel (from 0 to kNbrPictures)

pixPos = 0;



// Array to hold pictures

pix = [];



// Converts picture pos (0-kNbrPictures) to x coordinate for picture

ppToX = function(pixPos, i)

{

  // pixpos is our current position on the wheel

	// i is the slot number of this particular image



	// wrap i around to fall on either side of pixPos

	if (i < pixPos-kNbrPictures/2)

	{

		i += kNbrPictures;

	}

	else if (i > pixPos+kNbrPictures/2)

	{

		i -= kNbrPictures;

	}



	var di = i - pixPos;



	// At this point di represents a linear scaling index for the picture

	// position (-3,-2,-1,0,1,2,3)

	// Here we add an additional amount to get the stretching effect

	// Omit this line for linear positioning

	di *= Math.pow(kStretchFactor,Math.abs(di*kStretchSensit  ivity));



  // CX-kCellWidth/2 represents the center position...

  return (CX-kCellWidth/2)+di*kCellWidth;

}



// stub function to create colored rectangle

getColor = function(t)

{

	r = (t*256) % 256;

	g = ((t+1/3)*256) % 256;

	b = ((t+2/3)*256) % 256;

	return (r << 16) + (g << 8) + b;

}



makePicture = function(i)

{

	var mc = _root.createEmptyMovieClip("pic_" + i, i+1);

	mc.clear();

	mc.beginFill(getColor(i/kNbrPictures),100);

	mc.moveTo(0,0);

	mc.lineTo(kPictureWidth, 0);

	mc.lineTo(kPictureWidth, kPictureHeight);

	mc.lineTo(0, kPictureHeight);

	mc.lineTo(0, 0);

	mc.endFill();

	mc._y = 10;

	return mc;

}



// Initialization - setup the pictures

for (var i = 0; i < kNbrPictures; ++i)

{

	pix[i] = makePicture(i);

}





// Our animation routine

_root.onEnterFrame = function()

{

  // Use mouse to effect pixPos (the wheel position)

	pixPos += (_xmouse - CX)*kMouseSensitivity;

	if (pixPos < 0)

		pixPos += kNbrPictures;

	else if (pixPos > kNbrPictures)

		pixPos -= kNbrPictures;



	// Reposition each picture

	for (var i = 0; i < kNbrPictures; ++i) {

		pix[i]._x = ppToX(pixPos, i);

	}

}

---

EDIT: Rewrote the code a bit.