Flash Script – Flash MX Dragable Rubber Band Effect

By Georgina Laidlaw
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now


1. Start by creating a movie that has the dimensions: width=400 and height=50.

2. Create a mouse pointer.

3. Now, convert the mouse pointer to a movieclip, name it "pointer", then give it an instance name of "pointer".

4. Using the text tool, type "RUBBER" — it should appear as shown in the movie above.

5. Select the text and convert it to a movieclip. Name it "rubber", and give it an instance name of "rubber".

Now, double click the text movieclip to go into its timeline.

6. Create a new layer, and name it "Button".

8. In the button layer, create an invisible button.

9. Apply these actions to the button:

on (rollOver) { 
 Mouse.hide();
 _root.pointer._visible = true;
}
on (rollOut) {
 Mouse.show();
 _root.pointer._visible = false;
}
on (press) {
 Mouse.hide();
 _root.pointer._visible = true;
 _root.flag = true;
 _root.elas = false;
}
on (release, releaseOutside) {
 Mouse.show();
 _root.pointer._visible = false;
 _root.flag = false;
 _root.elas = true;
}

10. Go back to the main timeline (i.e. scene1) and in the default keyframe, insert the action:

//make the pointer invisible 
pointer._visible = false;
flag = false;
elas = false;
//start width is width of movieclip
startwidth = 100;
//mvwidth is width of movie
mvwidth = 400;
function setwidth()
{
 if(flag) {
   width = mvwidth - _xmouse
   width = width + 100
   rubber._width = width
   iws = rubber._width
 }
 if(elas){
   elastic += (startwidth - rubber._width);
   elastic *= .4
   rubber._width += elastic;
 }
}
//this acts as a timer it calls the setwidth function  
every 50 milli seconds
setInterval(setwidth,50)

Finished! Now, test the movie!

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now