# Magnetic Thumbnails

**URL:** <https://forum.kirupa.com/t/magnetic-thumbnails/289417>\
**Category:** flash\
**Created:** [May 30, 2009, 12:02am UTC](https://forum.kirupa.com/t/magnetic-thumbnails/289417 "2009-05-30T00:02:31Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darrenmtay](https://avatars.discourse-cdn.com/v4/letter/d/49beb7/32.png) [@Darrenmtay](https://forum.kirupa.com/u/Darrenmtay)\
**Post date:** [May 30, 2009, 12:02am UTC](https://forum.kirupa.com/t/magnetic-thumbnails/289417/1 "2009-05-30T00:02:31Z")

</div>

Hi Guys. I have just purchased this file ([http://flashden.net/item/magnetic-thumbnails/8101](http://flashden.net/item/magnetic-thumbnails/8101)) from Flashden. I have altered the original ok and positioned it within my fla ok.

I am struggling though trying to work out how to add a small thumbnail picture on each square. Any help and advice on how to add say 7 different thumbnail images rather than just 7 black sqaures, would be greatly appreciated.

Here is the code and comments that came with the purchased file:

_[COLOR=royalblue]/this is the code for the cool elastic effect… you can use it on galleries, buttons and just about anything you like![/COLOR]  
 [COLOR=royalblue]For this example the size of the thumbs are 40 x 25 px, but you can change it just by doubleclicking the “holder” movieclip in the library and change the size of the black area. Make sure to center align the black area./[/COLOR]_  
_[COLOR=royalblue]//imports Flash tween class (installed by default)[/COLOR]_  
_[COLOR=royalblue]import mx.transitions.Tween;[/COLOR]_  
_[COLOR=royalblue]import mx.transitions.easing._;[/COLOR]\*  
_[COLOR=royalblue]//name of tweens used for thumbs to bounce back[/COLOR]_  
_[COLOR=royalblue]var \_tweenY:Tween;[/COLOR]_  
_[COLOR=royalblue]var \_tweenX:Tween;[/COLOR]_  
_[COLOR=royalblue]//The function that tweens thumbs back with an elastic feel[/COLOR]_  
_[COLOR=royalblue]function elasticOut(mc:MovieClip){[/COLOR]_  
_[COLOR=royalblue]\_tweenY = new Tween(mc, “\_y”, Elastic.easeOut, mc.\_y, 0, 1, true);[/COLOR]_  
_[COLOR=royalblue]\_tweenX = new Tween(mc, “\_x”, Elastic.easeOut, mc.\_x, 0, 1, true);[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]//Create a movieclip containing the thumbs[/COLOR]_  
_[COLOR=royalblue]this.createEmptyMovieClip(“thumbs\_mc”, 0);[/COLOR]_  
_[COLOR=royalblue]//position the container[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc.\_x = 20;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc.\_y = 12;[/COLOR]_  
_[COLOR=royalblue]//Number of thumbs in gallery[/COLOR]_  
_[COLOR=royalblue]var numThumbs:Number = 7;[/COLOR]_  
_[COLOR=royalblue]//number of colums[/COLOR]_  
_[COLOR=royalblue]var columns:Number = 7;[/COLOR]_  
_[COLOR=royalblue]//distance between thumbs vertically[/COLOR]_  
_[COLOR=royalblue]var distY:Number = 5;[/COLOR]_  
_[COLOR=royalblue]//distance between thumbs horizontally[/COLOR]_  
_[COLOR=royalblue]var distX:Number = 8;[/COLOR]_

_[COLOR=royalblue]//Vaiables used in rollover[/COLOR]_  
_[COLOR=royalblue]var depth:Number = 1; //dont change this, it’s used to make sure tha active thumb is on top of all other thumbs[/COLOR]_  
_[COLOR=royalblue]var speed:Number = .2; //play around with this to alter speed[/COLOR]_  
_[COLOR=royalblue]//Create thumbs in thumbs\_mc[/COLOR]_  
_[COLOR=royalblue]function createThumbs(){[/COLOR]_  
_[COLOR=royalblue]//loop creates thumbs…[/COLOR]_  
_[COLOR=royalblue]for(var i:Number = 0; i \< numThumbs; i++){[/COLOR]_

_[COLOR=royalblue]//attach movieclips from library - remember to copy these movieclips if used in other fla’s[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc.attachMovie(“thumb\_template”,“thumbs\_”+i,i);[/COLOR]_

_[COLOR=royalblue]//store an unique id variabe inside each thumb, it makes it easy to identify the thumbs being pressed[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].back.temp = i;[/COLOR]_

_[COLOR=royalblue]//rollover on invisible back creates an enterFrame function that moves the thumb towards the mouse cursor[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].back.onRollOver = function(){[/COLOR]_  
_[COLOR=royalblue]//put on top[/COLOR]_  
_[COLOR=royalblue]depth += 1;[/COLOR]_  
_[COLOR=royalblue]this.\_parent.swapDepths(depth);[/COLOR]_

_[COLOR=royalblue]//enterframe to move thumb[/COLOR]_  
_[COLOR=royalblue]this.onEnterFrame = function(){[/COLOR]_  
_[COLOR=royalblue]//mouse position[/COLOR]_  
_[COLOR=royalblue]var \_mouseX:Number = this.\_parent.\_xmouse;[/COLOR]_  
_[COLOR=royalblue]var \_mouseY = this.\_parent.\_ymouse;[/COLOR]_  
_[COLOR=royalblue]//new position for thumb[/COLOR]_  
_[COLOR=royalblue]var \_newX:Number = (\_mouseX - this.\_parent.holder\_mc.\_x) \* speed;[/COLOR]_  
_[COLOR=royalblue]var \_newY:Number = (\_mouseY - this.\_parent.holder\_mc.\_y) \* speed;[/COLOR]_  
_[COLOR=royalblue]//move thumb towards mouse[/COLOR]_  
_[COLOR=royalblue]this.\_parent.holder\_mc.\_x += \_newX;[/COLOR]_  
_[COLOR=royalblue]this.\_parent.holder\_mc.\_y += \_newY;[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_

_[COLOR=royalblue]//delete the enterframe when mouse exist the thumb area, call the elastic function to tween thumb back into place[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].back.onDragOut = thumbs\_mc[“thumbs\_”+i].back.onRollOut = function(){[/COLOR]_  
_[COLOR=royalblue]delete this.onEnterFrame;[/COLOR]_  
_[COLOR=royalblue]elasticOut(this.\_parent.holder\_mc);[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].back.onPress = function(){[/COLOR]_  
_[COLOR=royalblue]//Put your actions here[/COLOR]_  
_[COLOR=royalblue]trace("clicked thumb number: " + this.temp); //remember that thumbs id go from [0 - numThumbs[[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_

_[COLOR=royalblue]//calculate spacing between thumbs[/COLOR]_  
_[COLOR=royalblue]var spaceHor:Number = distX + thumbs\_mc[“thumbs\_”+i].holder\_mc.\_width;[/COLOR]_  
_[COLOR=royalblue]var spaceVer:Number = distY + thumbs\_mc[“thumbs\_”+i].holder\_mc.\_height;[/COLOR]_

_[COLOR=royalblue]//position all thumbs inside thumbs\_mc[/COLOR]_  
_[COLOR=royalblue]if(i \< columns){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = 0;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* i; [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 2){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 3){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 2;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 2); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 4){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 3;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 3); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 5){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 4;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 4); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 6){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 5;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 5); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 7){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 6;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 6); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 8){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 7;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 7); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 9){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 8;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 8); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 10){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 9;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 9); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 11){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 10;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 10); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]else if(i \< columns \* 12){[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_y = spaceVer \* 11;[/COLOR]_  
_[COLOR=royalblue]thumbs\_mc[“thumbs\_”+i].\_x = spaceHor \* (i-columns \* 11); [/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]//If you need more than 48 thumbs you will have to continue the “else if”'s above[/COLOR]_

_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]//this is just for demonstration, delete this code if you dont want the user to decide the number of columns[/COLOR]_  
_[COLOR=royalblue]function alterThumbs(){[/COLOR]_  
_[COLOR=royalblue]//delete existing thumbnails[/COLOR]_  
_[COLOR=royalblue]for(var i:Number = 0; i \< numThumbs; i++){[/COLOR]_  
_[COLOR=royalblue]removeMovieClip(thumbs\_mc[“thumbs\_”+i]);[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]columns = columns\_txt.text;[/COLOR]_  
_[COLOR=royalblue]if(columns == undefined){[/COLOR]_  
_[COLOR=royalblue]columns = 5;[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]numThumbs = number\_txt.text;[/COLOR]_  
_[COLOR=royalblue]if(numThumbs == undefined){[/COLOR]_  
_[COLOR=royalblue]numThumbs = 25;[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]//make thumbnails[/COLOR]_  
_[COLOR=royalblue]createThumbs();[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]test\_btn.onRelease = function(){[/COLOR]_  
_[COLOR=royalblue]trace(“testing”);[/COLOR]_  
_[COLOR=royalblue]alterThumbs();[/COLOR]_  
_[COLOR=royalblue]}[/COLOR]_  
_[COLOR=royalblue]//call the function that creates thumbnails[/COLOR]_  
_[COLOR=royalblue]createThumbs();[/COLOR]_