Publishing System Settings Logout Login Register
Create a Worm that Follows the Mouse
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on December 4th, 2006
12132 views
Adobe Flash
Creating A Worm That "Follows" The Mouse
Ben Fleming

Preview

Lets get started. First, create a new document, with a frame rate (FPS) of 20 or higher. The dimensions can be any size. On the first layer, draw a 60x60 circle. Then open up the Color Mixer (Shift+F9) and mix something like this:


You can use my colours if you want. This will be the body of the worm. Also, if you set your background to black, you will be able to see it better. When you've mixed something like this, fill in the circle like so:


When you've done that, select the ball, and convert it to a symbol:


Have everything exactly as its shown there. Press OK.
If you check your Library panel (F11), your Movieclip should be in there. So delete the Movieclip from Layer 1, and then rename Layer 1 to Actionscript. In here we will attach the Movieclip into the movie. Thats why we had an identifier. So, click on the first frame, and open up the Actionscript panel (F9).
The way the worm is going to work, is that its not really going to follow the mouse, but every time we move it, we will attach another Movieclip to the stage, to make it look like a worm. So, on the first line, write this:

[code=Java]var depth:Number = 0;[/code]

This is creating a new variable called depth, and its going to contain only numbers, so we've set the data type to number. Then we've given it a value of 0. I'll explain later why we have created this variable.
Next line:

[code=Java]onMouseMove = function() {[/code]

Ok, so we've made our onMouseMove function, so whatever is between the curly brace's of this function will happen only when the mouse is moved. In the next line, write this:

[code=Java]var newSymbol = "worm"+depth;[/code]

Here's where our depth variable comes into play. What we've done here is created a new variable (and we havent set a data type, because it contains a string and a number), and given it the value of "worm"+0, or worm0. I'll explain later why we created this variable.

[code=Java]_root.attachMovie("worm", newSymbol, depth);[/code]

Here we've attached a new movie, and that movie we attached is the worm movie (which is specified inside the double-quotation marks). Then, we've given it a new name, worm0, or newSymbol. Then we've given it a depth. This is basically like actionscripted layers. The higher the number, the higher the layer. This is so that we make sure that the latest movie attached is on top. Next couple of line:

[code=Java]_root[newSymbol]._x = _root._xmouse;
_root[newSymbol]._y = _root._ymouse;[/code]

Here we've given the newly attached movie a position. And that so happens to be the mouse positions. Simple enough. Next line:

[code=Java]depth++;
}[/code]

Ok, this is a very simple piece of code, even if it doesnt look so. Basically, we're just adding 1 to the number. Its an actionscripterrs shortcut to math. So we could easily write depth += 1;, or depth = depth+1;. Now, you ask, why would we need to add 1 to the number? Actually, I dont think you'd be asking that because I bet you've figured it out already. Well, this is so that the next time we attach a new movie (or the next time we move our mouse) we'd make sure that the newly attached movie is on top. And we make sure that the newly attached movie has a new name. Thats why we specified the new name "worm"+depth.
Then we've closed the onMouseMove function.
Now if you test your movie, you'd have something looking like this:


Uh-oh! Why is the worm still there after its attached so many? Well, thats because we wrote no code for it. But first, we need to animate it. This is so that we remove the movieclips without it looking choppy, and make it look more like a worm. So, in the Library panel (F11), right-click on the Mouse Movieclip, and select Edit.
Now that we're in there, insert a new keyframe (F6) on about the 20th. Then, right-click on that keyframe, and select Create Motion Tween. Then, on about the 70th frame, insert another keyframe. Then change the size of the circle to 1px, width and height. This is so that the worm as an end.
Now, add a new layer, insert a keyframe on the 20th frame, and draw a 60x60 circle again (on the 20th frame). Open up the Color Mixer, and mix something like this:


Basically, a 50% lighter version of the first circle. Then fill it in the same way as the first circle.
Then right-click on the 20th (key)frame and select Create Motion Tween. Then put a keyframe on the 30th frame, and a keyframe on the 25th. On the 20 and 30th (key)frames, reduce the circles width and height by about 10px. Then remove any extra frames that are above the 30th frame.
Now the animation is done! Click the Scene 1 button on the Timeline to go back to the main movie. Then, on the Actionscript layer, open it up (F9). Before the depth++; line, type the following:

[code=Java]_root[newSymbol].onEnterFrame = function() {[/code]

Here we're creating an onEnterFrame loop for the latest attached movie, which constantly loops whatever is inside its curly brace's. Then after that line, write this:

[code=Java]if(this._currentframe == 70) {
this.removeMovieClip();
delete this.onEnterFrame;
}[/code]

Here we've created an if statement. This asks if the current frame of the _root[newSymbol] (or this, because its inside its own onEnterFrame loop) is 70. If it is, it says to remove the movieclip from the stage, and stop the onEnterFrame loop, with the delete function. Then we close the if statement with the closed curly brace. Now, one last piece of code:

[code=Java]}[/code]

This goes after the if statement, and closes the onEnterFrame loop. Now, if you test your movie, it should look something like this preview (located at the top of the page).

And there you have it. How to make a worm "follow" the cursor. This method can be used to make so many things, not always having to do with the cursor. Thanks for taking this tutorial!
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
Ben

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top