# Thumbnail to full size transition

**URL:** <https://forum.kirupa.com/t/thumbnail-to-full-size-transition/182455>\
**Category:** flash\
**Created:** [March 18, 2006, 1:18pm UTC](https://forum.kirupa.com/t/thumbnail-to-full-size-transition/182455 "2006-03-18T13:18:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![zao](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zao/32/141_2.png) [@zao](https://forum.kirupa.com/u/zao)\
**Post date:** [March 18, 2006, 1:18pm UTC](https://forum.kirupa.com/t/thumbnail-to-full-size-transition/182455/1 "2006-03-18T13:18:10Z")

</div>

Like the title says, I’m curious if anyone has some code laying around for this type of effect.

Basically I will have 5 thumbnails, once the user clicks on this thumnail it will move over to the other side of the stage, and turn into the full sized version of the photograph.

Then once a new thumbnail is clicked, the full sized will scale back down, become the thumbnail once again, and then the newly selected thumbnail will do like step 1.

Hopefully my tired written is understandable.

---

<div class="post-metadata">

**Author:** ![zao](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zao/32/141_2.png) [@zao](https://forum.kirupa.com/u/zao)\
**Post date:** [March 19, 2006, 3:57am UTC](https://forum.kirupa.com/t/thumbnail-to-full-size-transition/182455/2 "2006-03-19T03:57:07Z")

</div>

Any ideas guys?

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 19, 2006, 9:28am UTC](https://forum.kirupa.com/t/thumbnail-to-full-size-transition/182455/3 "2006-03-19T09:28:57Z")

</div>

Something like this?

scotty(-:

---

<div class="post-metadata">

**Author:** ![zao](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zao/32/141_2.png) [@zao](https://forum.kirupa.com/u/zao)\
**Post date:** [March 19, 2006, 4:25pm UTC](https://forum.kirupa.com/t/thumbnail-to-full-size-transition/182455/4 "2006-03-19T16:25:08Z")

</div>

Exactly like that, thank you so much.

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 19, 2006, 4:39pm UTC](https://forum.kirupa.com/t/thumbnail-to-full-size-transition/182455/5 "2006-03-19T16:39:33Z")

</div>

you’re welcome :thumb:

---

<div class="post-metadata">

**Author:** ![zao](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zao/32/141_2.png) [@zao](https://forum.kirupa.com/u/zao)\
**Post date:** [March 19, 2006, 8:21pm UTC](https://forum.kirupa.com/t/thumbnail-to-full-size-transition/182455/6 "2006-03-19T20:21:24Z")

</div>

Now I have approached my new problem. Is ther a way to assign the selected MC to display text?

Like if I click on mc4 … how would I go about putting a description under the image once it has reached full size…?

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 21, 2006, 1:51pm UTC](https://forum.kirupa.com/t/thumbnail-to-full-size-transition/182455/7 "2006-03-21T13:51:17Z")

</div>

Not tested

```auto
var cur;
txtArray = new Array("desc1.txt", "desc2.txt", "desc3.txt", "desc4.txt");
MovieClip.prototype.changePics = function() {
	this.onEnterFrame = function(id) {
		if (cur != undefined) {
			cur._xscale = 20-(20-cur._xscale)/1.2;
			cur._yscale = cur._xscale;
			if (cur._xscale<21) {
				cur._yscale = cur._xscale=20;
				cur._x = cur.sx-(cur.sx-cur._x)/1.2;
				cur._y = cur.sy-(cur.sy-cur._y)/1.2;
				if (Math.abs(cur.sx-cur._x)<1 && Math.abs(cur.sy-cur._y)<1) {
					this._x = bg._x-(bg._x-this._x)/1.2;
					this._y = bg._y-(bg._y-this._y)/1.2;
					if (Math.abs(this._x-bg._x)<1 && Math.abs(this._y-bg._y)<1) {
						this._xscale = 100-(100-this._xscale)/1.2;
						this._yscale = this._xscale;
						if (this._xscale>99) {
							this._yscale = this._xscale=100;
							cur = this;
							loadText(txtArray[id]);
							delete this.onEnterFrame;
						}
					}
				}
			}
		} else {
			this._x = bg._x-(bg._x-this._x)/1.2;
			this._y = bg._y-(bg._y-this._y)/1.2;
			if (Math.abs(this._x-bg._x)<1 && Math.abs(this._y-bg._y)<1) {
				this._xscale = 100-(100-this._xscale)/1.2;
				this._yscale = this._xscale;
				if (this._xscale>99) {
					this._yscale = this._xscale=100;
					cur = this;
					loadText(txtArray[id]);
					delete this.onEnterFrame;
				}
			}
		}
	};
};
my_var = new LoadVars();
function loadText(txt) {
	my_var.onLoad = function(ok) {
		if (ok) {
			//desc_txt is the instancename of your textfield
			desc_txt.html = true;
			//'info' is your text variable
			desc_txt.htmlText = this.info;
		}
	};
	my_var.load(txt);
}
for (var i = 0; i<4; i++) {
	var mc = this["mc"+i];
	mc.sx = mc._x;
	mc.sy = mc._y;
	mc.id = i;
	mc.onPress = function() {
		this.changePics(this.id);
	};
}

```

scotty(-: