Hi Guys. I have just purchased this file (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]