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.

[dieselman]

hey guys!
i tried to add different links and tooltips for each image but i am not good at flash and i couldnt manage it. i have an array of 5 links corresponding to each image. what i want is sth like this.

Clip.onRelease=function()
{
getURL(links[a],"_blank")
}

but apparently this function is not called until pressing the button and "a" seems to be undefined. how can i get the actual order of the image at this point, any ideas??

[Kostas Zotos]

Hi,

May this helps (locate this part in the script of .fla file and modify in the way shown below):

// Array to hold pictures
pix = [];

links=[]   // add the links -as comma separated strings-  in the array (must correspond one link per image)

for (a=1;a<=kNbrPictures;a++){
	var ID:String="img"+a

	// IMPORTANT: The Images have been converted to graphic symbols 
	// and Linkage IDs have been assigned to them.
	// (just import an image on stage. Select it and press F8. Give a name and id linkage)
	// right clik an image symbol on library (eg: img1) , then select: "Linkage..." 
	var Clip=_root.attachMovie(ID,ID,this.getNextHighestDepth())
	Clip._y=kPictureY
	Clip.id=a  // Assign the current value of "a" to a clip property "id"
	
	// ------------ If want interaction with images ------------------
	// If don't want, just comment or delete this part (between ---- lines)
	Clip.onRollOver=function(){
		this._alpha=70
	}
	Clip.onRollOut=function(){
		this._alpha=100
	}

	// Assign an onRelease handler
	Clip.onRelease=function() {
 		trace(this.id)
		getURL(links[this.id-1],"_blank")  
		// links must be an array with URL strings
 		// Since array elements are zero based, we use: "this.id-1"

		// Put any actions here (executed when click on image)
	}
	// ------------ If want interaction with images (END)------------------
	
	pix.push(Clip)
}

The approach is similar for tooltips

Kostas

[crrollyson]

This is great work!

I'm curious if it is possible to have the pictures clickable (say acting as buttons) if you can add this property in order to have them clickable to open another section of information in a specified area of the same .fla file?

Would it be as simple as just converting each image to a button and adding the behavior?

Any help or insight is much appreciated!

CR

[crrollyson]

I've tried everything I can think of to slow down the speed of the boxes.
Anyone have an insight!?

Not much hair left!

Originally Posted by Kostas Zotos

Hi,

May this helps (locate this part in the script of .fla file and modify in the way shown below):

// Array to hold pictures
pix = [];

links=[]   // add the links -as comma separated strings-  in the array (must correspond one link per image)

for (a=1;a<=kNbrPictures;a++){
	var ID:String="img"+a

	// IMPORTANT: The Images have been converted to graphic symbols 
	// and Linkage IDs have been assigned to them.
	// (just import an image on stage. Select it and press F8. Give a name and id linkage)
	// right clik an image symbol on library (eg: img1) , then select: "Linkage..." 
	var Clip=_root.attachMovie(ID,ID,this.getNextHighestDepth())
	Clip._y=kPictureY
	Clip.id=a  // Assign the current value of "a" to a clip property "id"
	
	// ------------ If want interaction with images ------------------
	// If don't want, just comment or delete this part (between ---- lines)
	Clip.onRollOver=function(){
		this._alpha=70
	}
	Clip.onRollOut=function(){
		this._alpha=100
	}

	// Assign an onRelease handler
	Clip.onRelease=function() {
 		trace(this.id)
		getURL(links[this.id-1],"_blank")  
		// links must be an array with URL strings
 		// Since array elements are zero based, we use: "this.id-1"

		// Put any actions here (executed when click on image)
	}
	// ------------ If want interaction with images (END)------------------
	
	pix.push(Clip)
}

The approach is similar for tooltips

Kostas