Picture Sliding

[jcsimons]

Hello everyone,

I have visited a site last week that had a very intersting way of sliding pictures in an animation.

http://www.gallagherdesign.com/

Since then, I have trided to reproduce the effect of the first page (sliding in, stopping and sliding out) but I can figure it out.

The way I see it it, if first loads the pictures (via loadmovie) and gets their properties to apply them to the underlying square.

The whole process has to be applied to a series of animation which are then animated with a detection of the position of the mouse, movement effect and some sort of collision detection (this is probably the hardest bit!!)

Any of you has the brain to crack this nut?

Cheers,

JC.

[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.

[jcsimons]

Thanks, that's the exact help I was hopping for, I think I can delete what I had done and start again based on this code. I still have to do the integration of the pictures (which are of variable width). But thanks a lot for this, I'll post the revised code once I have been able to continue to work on it.

JC.

[California]

This works awesome with the colored squares and is exactly what I am looking for except I am having trouble modifying it to work with photos.

Can someone please show me what I need to change or how to create the pix array for use with photos?

[Kostas Zotos]

Hi,

I've modified a bit the original code to include images instead of colored boxes.. (Images attached to stage from library, so you have to import your images insted of the existing). For further details (and instrunctions) please read some comments inside code.

Here is also a very similar slideshow: http://board.flashkit.com/board/showthread.php?t=765860

Note: The attached file is for Flash 8 and above..

Regards!

Kostas

[Kostas Zotos]

Hi,

I improved the file a bit.. Here is the (new) attachement:

[As an alternative (the example attaches the images symbols from library), someone may manually add movie clips in the array, like this:
pix = [Pic1_mc, Pic2_mc, Planet_mc, Sky_mc, myLogo] // The image clips
(these must exist on stage as movie clip instances -you have to assign your specific names-]

[California]

EXCELLENT! Thank you very much.