Flash Script – Flash MX Dragable Rubber Band Effect


type = 'application/x-shockwave-flash'
data = 'http://sitepointstatic.com/flash/rubberman.swf'
width = '400'
height = '400'
bgcolor = 'black'
>

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.