# Looking for a simple polaroid gallery or

**URL:** <https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954>\
**Category:** Uncategorized\
**Created:** [July 2, 2008, 1:59pm UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954 "2008-07-02T13:59:56Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [July 2, 2008, 1:59pm UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/1 "2008-07-02T13:59:56Z")

</div>

an starting point.

I have my images url in an Array and i would to make a stack of polaroids with

- drag
- double click bigger

Any tips or links?

---

<div class="post-metadata">

**Author:** ![randomagain](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@randomagain](https://forum.kirupa.com/u/randomagain)\
**Post date:** [July 2, 2008, 2:19pm UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/2 "2008-07-02T14:19:39Z")

</div>

there is a tut / code out there for exactly this…

if I can find it so can you, if not I will upload a copy if I still have it

---

<div class="post-metadata">

**Author:** ![pantas](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@pantas](https://forum.kirupa.com/u/pantas)\
**Post date:** [July 2, 2008, 2:34pm UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/3 "2008-07-02T14:34:22Z")

</div>

ok here we go:

double click function

```auto

var clickCounter:Number = 250;
doubleClick = function (Target) : Void {
	tempo = getTimer();
	if(this.time != undefined && tempo - this.time < clickCounter){
		trace("DOUBLE CLICKED "+ Target)
	}
	this.time = tempo;
};

```

movieclip control:

```auto

myMC.onPress = function(){
	doubleClick(this)
	this.startDrag()
}

myMC.onRelease = myMC.onReleaseOutside = function(){
	stopDrag()
}

```

---

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [July 3, 2008, 9:02am UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/4 "2008-07-03T09:02:07Z")

</div>

@randomagain, yep i found [http://www.no3dfx.com/polaroid/](http://www.no3dfx.com/polaroid/)

but i don’t read norwegian (i speak it fluently ;))

I have used it as a starting point and used his polaroid movieclip

@pantas, really tx that really help me out.

Here’s what i have right now (might be usefull for someone else)

```auto

/***
- use of a polaroid picholder
- attach as many as needed
- random x,y, rotation
- onClick swapDepth
- on double click enlarge and center

to-do
- no drag when big : done
- go back to x and y drag 
- when big next and prev buttons
- - on resize
***/
import com.utils.DelegateFD;
import gs.TweenFilterLite;
//vars
var photoHolderArray:Array;
photoHolderArray = ["photos/1.jpg", "photos/2.jpg", "photos/3.jpg"];
//
var clickCounter:Number = 250;
var thumbScale:Number = 30;
//draw boundaries_mc to place the thumbs
var boundaries_mc:MovieClip;
boundaries_mc._visible = false;
//
var doubleClickFlag:Boolean;
doubleClickFlag = false;
//end vars
//functions
function getPhoto(mcContainer, imgURL) {
	var mcLoader:MovieClipLoader = new MovieClipLoader();
	var myListener:Object = new Object();
	myListener.onLoadStart = function(target_mc:MovieClip) {
		mcContainer.progressBar_mc._visible = true;
		mcContainer.progressBar_mc.gotoAndStop(0);
	};
	myListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
		var loaded:Number = Math.round((bytesLoaded/bytesTotal)*100);
		mcContainer.progressBar_mc.percent.text = loaded+" %";
		mcContainer.progressBar_mc.gotoAndStop(loaded);
	};
	myListener.onLoadInit = function(target_mc:MovieClip) {
		mcContainer.progressBar_mc._visible = false;
	};
	mcLoader.addListener(myListener);
	mcLoader.loadClip(imgURL, mcContainer.picHolder);
}
//
function buildPolaroids() {
	for (i=0; i<photoHolderArray.length; i++) {
		//mcRot remember position
		var mcRot:Number = 30-60*Math.random();
		mc = this.attachMovie("fotoHolder", "fotoHolder"+i, this.getNextHighestDepth());
		var scaleTween = TweenFilterLite.to(mc, 0, {_xscale:thumbScale, _yscale:thumbScale, _rotation:mcRot});
		photoShadowTween = TweenFilterLite.to(mc, 1, {dropShadowFilter:{color:0x333333, alpha:.8, blurX:5, blurY:5, angle:45, distance:3}});
		//random x position
		orgX = boundaries_mc._x + Math.floor(Math.random() * boundaries_mc._width/2);
		mc._x = orgX;
		//random y position
		orgY = boundaries_mc._y + Math.floor(boundaries_mc._height/2*Math.random());
		mc._y = orgY;
		//doubleclicked make big or little
		mc.onPress = DelegateFD.create(this, whenPressed, mc, mcRot, orgX, orgY);
		//stop drag
		mc.onRelease = mc.onReleaseOutside=DelegateFD.create(this, stopDrag, mc);
		//load photos
		getPhoto(mc,photoHolderArray*);
		//nice build up
		var buildUpTween = TweenFilterLite.from(mc, 0.7, {_x:-100, _y:-100, _alpha:0, delay:i*0.15 ,ease:Back.easeOut})
	}
}
//tx to pantas [kirupa]
function doubleClick(target, mcRot, orgX, orgY):Void {
	tempo = getTimer();
	if (this.time != undefined && tempo-this.time<clickCounter) {
		if(doubleClickFlag == false) {
			trace("DOUBLE CLICKED first time"+mcRot);
			var midX = Stage.width/2;
			var midY = Stage.height/2;
			var photoBigTween = TweenFilterLite.to(target, 0.8, {_xscale:100, _yscale:100, _x:midX, _y:midY, ease:Elastic.easeOut, _rotation:0});
			doubleClickFlag = true;
		} else {
			trace("DOUBLE CLICKED second time");
			var photoSmallTween = TweenFilterLite.to(target, 0.7, {_xscale:thumbScale, _yscale:thumbScale, _x:orgX, _y:orgY, ease:Elastic.easeOut, _rotation:mcRot});
			doubleClickFlag = false;
		}
	}
	this.time = tempo;
}
//
function whenPressed(oPressed, mcRot, orgX, orgY) {
	//activate double click
	doubleClick(oPressed, mcRot, orgX, orgY);
	//make draggable if small: make a function???
	if(!doubleClickFlag) {
		oPressed.startDrag();
	} else {
		oPressed.stopDrag();
	}
	//always on top
	oPressed.swapDepths(this.getNextHighestDepth());
}
buildPolaroids();

```

To do

- go back to x and y drag
- next and prev buttons
- incorporate in my bigger project
- on resize
- auto scale photos

---

<div class="post-metadata">

**Author:** ![pantas](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@pantas](https://forum.kirupa.com/u/pantas)\
**Post date:** [July 3, 2008, 9:56am UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/5 "2008-07-03T09:56:44Z")

</div>

glad that was usefull!

next time you will be the one sharing the code 😉

cheers, and good work

---

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [July 3, 2008, 10:46am UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/6 "2008-07-03T10:46:22Z")

</div>

@pantas, well the one sharing the code would be nice, but at the moment i am stuck with the onresize.

as the photoholder are randomly place i am bit stuck

- how to place them onresize
- and when they are dragged

```auto

////////////////////////////////
Stage.align = "TL";
Stage.scaleMode = "noScale";
var stageL:Object = new Object();
stageL.onResize = function() {
	
	logo_mc._x = Stage.width/2-logo_mc._width/2;
	logo_mc._y = website_bg._y+20;
	website_bg._x = Stage.width/2-website_bg._width/2;
	website_bg._y = Stage.height/2-website_bg._height/2;
	menu_mc._x = Stage.width/2-menu_mc._width/2;
	menu_mc._y = website_bg._y+150;
	footer_mc._x = Stage.width/2-footer_mc._width/2;
	footer_mc._y = (website_bg._y+website_bg._height)-30;
	portfolio._x = menu_mc._x+20;
	portfolio._y = website_bg._y+220;
	//for photos
	trace(numOfPhotos);
	for (i=0; i<numOfPhotos; i++) {
//here i need to replace or resize 
		mc = eval("fotoHolder"+i);
		trace(mc._x);

	}
	//
};
Stage.addListener(stageL);

```

---

<div class="post-metadata">

**Author:** ![pantas](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@pantas](https://forum.kirupa.com/u/pantas)\
**Post date:** [July 3, 2008, 10:56am UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/7 "2008-07-03T10:56:44Z")

</div>

sorry mate, don’t understand much english. can you be more specific?  
what is happening, and what do you want to happen?

---

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [July 3, 2008, 1:04pm UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/8 "2008-07-03T13:04:44Z")

</div>

@pantas, sorry it’s not you it’s me my english ain’t that good. I should reread my questions before i post them.

Any way, i have found a bit of a solution by putting it all in an websiteContent\_mc and replace websiteContent\_mc onResize.

Another question about your doubleClicked function.

How can i use tempo and timer to create a single click function, for

- single click bigger or drag ?

---

<div class="post-metadata">

**Author:** ![offpixel](https://avatars.discourse-cdn.com/v4/letter/o/9e8a1a/32.png) [@offpixel](https://forum.kirupa.com/u/offpixel)\
**Post date:** [July 3, 2008, 2:38pm UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/9 "2008-07-03T14:38:39Z")

</div>

i made this 2 years ago…

[http://www.pavely.com/pfoto/](http://www.pavely.com/pfoto/)

i’ll see if i can dig out the source files to help…

---

<div class="post-metadata">

**Author:** ![pantas](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@pantas](https://forum.kirupa.com/u/pantas)\
**Post date:** [July 4, 2008, 11:13am UTC](https://forum.kirupa.com/t/looking-for-a-simple-polaroid-gallery-or/264954/10 "2008-07-04T11:13:30Z")

</div>

you can [AS]delete btn.onRelease[/AS] and assign new functions