Flash Script – Flash MX Dragable Rubber Band Effect

By Georgina Laidlaw

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) { 
 _root.pointer._visible = true;
on (rollOut) {
 _root.pointer._visible = false;
on (press) {
 _root.pointer._visible = true;
 _root.flag = true;
 _root.elas = false;
on (release, releaseOutside) {
 _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
   elastic += (startwidth - rubber._width);
   elastic *= .4
   rubber._width += elastic;
//this acts as a timer it calls the setwidth function  
every 50 milli seconds

Finished! Now, test the movie!

No Reader comments



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in Front-end, once a week, for free.