Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: In this Flash tutorial, I will show you how to move a game character using the arrow keys, and have the character face in the direction that he is moving.

Demo:

Let’s get started!

Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file.

Save the file, and give it the appropriate name. I will call this “charMove_tut1″. Feel free to make the document dimensions (“Modify > Document or “command-J”) whatever you like, but I chose to use a size of 400 x 300 pixels.

The first thing we want to do is create a game character with 4 seperate states: left profile, right profile, front profile and back profile. Because this is not an illustration / animation tutorial, I will not be going through how to illustrate your character. Feel free to illustrate your own character, and convert each profile into it’s own symbol. For those beginners who do not want to illustrate their own character at this time, feel free to download the below .swf files (or jump to the source at the bottom of this page):

Front Profile: Download (right click on link and select “Save Link As”)

Left Profile: Download

Right Profile: Download

Back Profile: Download

—- ads by google —-

To import these files, open your Flash file, select “File > Import > Import to Library”, browse to where you saved the above files, select the files and click the “Import to Library” button. You should now see the 4 profiles as symbols in your Flash document Library (Window > Library (cmd-L)).

Once you have your character profiles ready (either by using mine or creating your own), we will need to place them in a movie clip symbol in order to control the movement. On frame 1 of our main movie timeline, select “Insert > New Symbol” (cmd-F8). This will bring up the “Create New Symbol” dialog box (Fig. 1). In the “Name” field, give your symbol an appropriate name (I chose “mc_character”, select the “Movie Clip” radial, and hit OK. This will automatically put you in the symbol editing mode for your new symbol. In your new symbol, create 2 new layers. Name the top layer “actions”, the second layer “labels” and the bottom layer “character”.

Extend your timeline to 20 frames. Select keyframe 5 for all 3 layers (you can shift click or click and drag), and insert a new keyframe (Insert > Timeline > Keyframe or F6). Do the same thing at frame 10 and 15. Click on keyframe 1 of our “labels” layer, and in the Properties window (Window > Properties > Properties or cmd-F3), give this frame a label of “right” (Fig. 2).

On frame 5, do the same thing, giving it a lable of “left”, frame 10 label “up”, frame 20 label “down”. Your timeline should now look similar to Fig. 3.

Note: Technically, we can make this movie clip only 4 frames, with frames 1-4 labeled the same as above. However, For the purposes of this tutorial, I felt it better to extend the frames in order to better illustrate the frame labels.

On frame 1 of your “character” layer, drag your right profile symbol to the stage and align it to the center. Tip: You can center align your symbols to the stage by using the Align palette (Window > Align or cmd-K (Fig. 4). Be sure the “To Stage” button is selected (it will be a darker shade of grey when selected) to align your sybols to the stage, deselecting this button allows you to align multiple symbols to each other.

On frame 5 of your “character” layer, drag your left profile symbol to the stage and align it to the center. In case you haven’t figured it out, do the same thing at frame 10 with the back profile symbol and frame 15 with the front profile symbol.

The last step is to add the ActionScript to our movie clip symbol. On the “actions” layer, click on frame 1, and add the following code to the Action panel (WIndow > Actions or alt-F9):

stop();

This simply stops our movie from playing through, since we only want it to change based on what key is pressed. Do the same thing at frame 5, 10, and 15 of our “actions” layer.

Our movie clip is now complete, so it’s time to add the ActionScript that will control our movement and the profile of our character.

Return to your main timeline. Drag your “mc_character” symbol from the library onto your stage. WIth your character selected, add the following code to the Actions panel:

onClipEvent(enterFrame){
if(Key.isDown(Key.RIGHT)){
this._x += 5;
this.gotoAndStop(“right”);
}

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(“left”);
}

if(Key.isDown(Key.UP)){
this._y -= 5;
this.gotoAndStop(“up”);
}

if(Key.isDown(Key.DOWN)){
this._y += 5;
this.gotoAndStop(“down”);
}

}

UPDATE: I’ve been finding several readers having trouble with doing a straight copy/paste of this code from the Web. I believe the issue lies in the quotation marks (”). When copying from the Web, it sometimes uses “smartquotes”. If you are getting an error on test regarding the quote marks, first step is to be sure you are using regular quotes (type them in instead of copy/paste from the Web site). If you are still having problems, feel free to drop me a comment and I will try my best to help resolve your issues. – Mike

That’s it! Go ahead and test your movie. What you shoud see is when you click on the arrow keys, your character not only moves in that direction, but faces that direction as well (up being backwards, down being forwards).

Now, let me try and explain the code:

onClipEvent(enterFrame){

On ClipEvent refers to the movie clip which this code is added to, the “enterFrame” is saying everytime our movie enters this frame of our main timeline, peform the actions between the curly brackets.

if(Key.isDown(Key.RIGHT)){

when the right arrow key is pressed, perform the actions within the curly brackets.

this._x += 5;

this. refers to the movie clip that this code is attached to. _x refers to the x position of this movie clip. If the right arrow is pressed, move the moviclip 5 pixels to the right (Tip: for faster movement, increase this number, for slower movement, decrease this number).

this.gotoAndStop(“right”);
}

Go to our frame labeled “right” in our movie clip symbol and stop on that frame. (Tip: Frame labels are case sensitive).

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(“left”);
}

This code is doing the same as above, but saying if the left arrow is pressed, move the clip 5 pixels to the left and go to our frame labeled “left”.

if(Key.isDown(Key.UP)){
this._y -= 5;
this.gotoAndStop(“up”);
}

This is doing the same as above, but saying if the up arrow is pressed, move the clip 5 pixels up (_y represents the y position of your clip) and go to our frame labeled “up”.

if(Key.isDown(Key.DOWN)){
this._y += 5;
this.gotoAndStop(“down”);
}
}

This is doing the same as above, but saying if the down arrow is pressed, move the clip 5 pixels down and to go our frame labeled “down”.

Thanks for reading, and I hope you found this tutorial useful. Source files are below, with commented code. As always, comments or questions are welcome. Check back soon for more expaned tutorials based on the idea of character movement.

Source Files (Flash 8): Flash Tutorial: Character Movement with Arrow Keys

Level: This is an intermediate lesson, that focuses on the ActionScript involved. It is assumed the user has basic Flash knowledge that includes creating symbols, creating motion tweens and creating frame lables.

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: In this Flash tutorial, I will demonstrate and explain the ActionScript involved to play a movie clip a certain number of times, and then stop playing. This tutorial focuse on the AS, so some basic Flash animation knowledge is assumed.

Demo:

Let’s get started!

Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file. Save the file, and give it the appropriate name.I will call this “clipDemo_tut1.fla”. Feel free to make the document dimensions whatever you like (“Modify > Document or “command-J”), but I chose to use a size of 400 x 200 pixels. Create 3 layers and label the top one “actions” the second one “counter” and the bottom one “ball”.

The first thing we need to do is create a simple animation. For this tutorial, I simply created a circle that will move horizontally across the stage. I will assume the reader of this tutorial has some knowledge of creating a movie clip in Flash, so I will just walk through this quickly without much detailed instuction.

First, on the “ball” layer, draw a circle on the stage, and position against the left side. Select the cirlce and choose “Modify > Convert to Symbol” (F8), give the symbol a name (I will use “mc_ball”) and choose the Movie Clip radial. Double click on the new symbol (either on the stage or in the Library), to bring you into editing mode. Click on the circle again to select it, and again choose “Modify > Convert to Symbol” (F8), give your symbol a new name (I will use “img_ball”), and this time select the “Graphic” radial. Going back to your movie clip, add some frames to your timeline, however many you want, it doesn’t matter, I will make mine 35 frames long. Add a new keyframe to the layer with your circle. On the last frame of your movie, move the circle off to the right side of your stage. Select any frame between 1 and 35 and select “Insert > Timeline > Create Motion Tween”. You should now have a simple animation of the ball sliding across your stage.

This is the animation we will use for this demonstration. Now it’s time to focus in on the purpose of this article, which is the ActionScript involved to make this movieclip play a certain number of times (3), and then stop.

In our “mc_ball” movie clip, add 2 layers to the timeline label the top one “actions” and the second one “labels”, and add a keyframe to the last frame of each layer. On frame 1 of the “labels” layer, in your property window, give this a frame label of “begin”, and on the last frame, give it a label of “end”. On the last frame of he “actions” layer, insert the following code in the actions panel (Windows > Actions or alt-F9):

_root.counter += 1;

if (_root.counter >= 3) {
_root.mc_ball.stop();
}

else {
_root.mc_ball.gotoAndPlay(“begin”);
}

Don’t worry, I will explain the code later. For now, let’s continue with the tutorial.

Return to the main timeline (scene 1). Click on the cirlce movie clip on the stage and in the properties window, give this an instance name of “mc_ball”.

Still in our main timeline, on frame 1 of the “actions” layer, add the following code:

var counter = 0

stop();

Technically, we are now done with our movie. Go ahead and test it out… you should see the circle travel across the stage 3 times, and then stop (stop being a blank stage). However, let’s add some additional ActionScript to better demonstrate what the code is doing. The following instructions are optional and are used simply to better illustrate what is happening.

First thing we want to do is tell us how many times the movie clip played, so for that I will add a simple counter in the lower corner. In scene 1, on the “counter” layer that we created earlier, let’s just put a text box in the lower corner and type the word “counter”. Next to this text, with the “text tool”, draw a small text box, and in the properties manual, set the text type to “Dynamic” and in the “Var” field, type “counter”. Let’s also give it an instance name of “counter” (Fig. 1).

Now, if we test our movie again, you should see a display of the number of times the animation has played in the bottom corner of the stage. The last thing we want to do is place a “replay” button on the so we can see the demonstration again.

Let’s add a new layer to our timeline and call it “Replay”. Below the “counter” text on the stage, let’s draw a text box and type the words “Demonstrate Again”. Note: be sure to change the “Text type” in our properties window back to “static”. Click on the text, select “Modify > Convert to Symbol” (F8), and give this a name of “mc_reset” and be sure to select the “movie clip” radial. With our new symbol selected, let’s give this an instance name of “mc_reset”, and add the following code to the Actions Panel:

on (release) {
_root.counter -= 3;
_root.mc_ball.gotoAndPlay(“begin”);
this.gotoAndPlay(“begin”);
}

Now, double click on the mc_reset symbol to bring us into the symbol editing mode and add 2 new layers, one named “actions” and one named “labels”. Let’s also add a new frame to all three layers. In the “actions” layer, add the following code to the Actions Panel on both frames:

stop();

Now, in the “labels” layer, let’s label frame 1 “begin” and frame 2 end”. Lastly, let’s delete the content from frame 1 of our text layer so that we only see the “demonstrate again” on the seconcd frame.

Still with me? Don’t worry, we are almost done…

Go to your “mc_ball” symbol, and on the last frame in the “actions” layer in the Actions Panel, add the code in blue below to the existing code (the code in green is what was added previously:

_root.counter += 1;

if (_root.counter >= 3) {
_root.mc_ball.stop();
_root.mc_reset.gotoAndStop(“end”);
}

else {
_root.mc_ball.gotoAndPlay(“begin”);
}

Return to the main stage and test your movie. What you should now see is the counter increase by one each time the circle crosses the stage, and when it hits 3, it should stop, and the “demonstrate again” text should appear. When you click on this text, the counter should return to zero and the ball should travel across the screen again.

And that’s all, we are now done! What? You want to know what this code does? Ok… let me try to explain it:

Actions Scene 1, Frame 1:

var counter = 0

This adds a varialbe called “counter” with a value of “0″.

Actions mc_ball, Final Frame:

_root.counter += 1;

this says to add 1 to our variable called counter which we declared in scene 1

if (_root.counter >= 3) {
_root.mc_ball.stop();
_root.mc_reset.gotoAndStop(“end”)
}

If the counter variable is greater than or equal to 3 (the number of times we want our clip to play), perform the actions between the curly brackets. The actions between the curly brackes are telling the “mc_ball” movie clip to stop playing, and it’s also telling the “mc_reset” clip (our Demonstrate Again button…) to go to the frame labeled “end”.

else {
_root.mc_ball.gotoAndPlay(“begin”);
}

If the counter variable is NOT greater than or equall to zero (the requirements we asked for in the “if” statement above), perform the actions between the curly brackets. The actions between the curly brackets are telling our “mc_ball” movie clip to go back to the begining and play again.

Hopefully that helps explain things, and I’ve tried to comment the source file for everyone to make sure it’s clear. As always, I hope you found this tutorial helpful, and if you have any questions or comments please leave them below!

Source Files (Flash 8): Flash Button Tutorial: Source File

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc..

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Demo:

Description: In this tutorial, I will explain how to create a button as a movieclip symbol using ActionScript rather than using the button symbol.

Let’s get started!

Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file. Save the file, and give it the appropriate name. I will call this “button_tut1.fla”. Feel free to change the document dimensions to whatever you like (“Modify > Document or “command-J”), but for the purpose of this tutorial, I will use 250×100 pixels.

The first thing we will need to do is draw a simple shape for our button. Select the rectangle tool, set your fill color to whatever you would like (I chose red), and a stroke of none. In the property window (Window > Properties > Properties or command-F3), set the corners to rounded at 9 (Fig. 1). Draw out a rectangle approximately 100×20 pixels. Tip: You can use the up or down arrows on your keyboard when dragging out your rectangle shape to increase or decrease the roundness of your corners.

You should have a rectangle similar to the Fig. 2.

Select the rectangle, and convert to a movie clip symbol (Modify > Convert to Symbol or F8). Remember, we are creating a movie clip button, so be sure to select the “movie clip” radial. Give your symbol an appropriate name, I called mine “mc_button”.

—- ads by google —-

Now, let’s add a little styling to our button. Double-click on our new symbol to bring us into the symbol editing mode. Select the rectangle, and Edit > Copy (command-C). In the timeline, name your layer “button solid” and create a new layer called “button highlight”. Lock the “button solid” layer, and move it to the bottom layer. On the “button highlight” layer, do a paste in place (Edit > Paste in Place or shift-command-V). With this rectangle selected, change the width to 92 and the height to 5 in the Info pallette (Window > Info or command-I (Fig. 3)), and select a linear gradient fill. In the color pallete, set your gradient scale to be 100% white on one end and 0% white on the other. With the rectangle still selected, select the gradient tool (located with your transform tool in the tools pallette), and rotate your linear gradient to be vertical (Tip: Hold shift when rotating to snap to 45º angles), with the 100% white on the top and the 0% white on the bottom. Also, shrink the gradient tool so that it is the height of your rectangle. Now, position this rectangle slightly below the top edge of your solid rectangle, and centered from side to side. You should have a shape that looks like Fig. 4.

Create a new layer, and call it “text”. Add a text block centered on your button shape and type “button”. You will now have something that looks like Fig. 5.

We are now done with the first state of our button, and now we can add the functionality that maves our movie clip behave like a button. For that, we will need to add some labels and then modify our button on the different frames.

Still working in your button symbol, add a new layer and call it “labels”. On your timeline, add frames to your timeline so that it extends to frame 45 for all layers. Insert a new keyframe (Insert > Timeline > Keyframe or F6) at frame 15 and 30 of the “labels” layer. click on frame 1, and in the Properties window, type “btn_off”. Repeat the process at Frame 15, but label it “btn_over”, label frame 30 “btn_down”. Add a new keyframe to the “button solid” layer at frame 15 and frame 30. You should now have a timeline that looks similar to Fig. 6.

At frame 15, select the “button solid” layer, and change the color of your shape, I’ve used a green for this example. Do the same thing at frame 30 and use a third color, I’ve used a blue. These color changes are simply for illustrative purposes. You can modify the buttons however you like, I just wanted to show a drastic change for when we add the ActionsScript that gives our movieclip a button functionaily.

We are now ready to start adding some ActionScript. Still within your button symbol, create a new layer, move it to the top of the timeline and label it “actions”. Add keyframes at 15 and 30. Click on frame 1 of your “actions” layer, and in the Actions panel (Windows > Actions or alt-F9) and add the following code:

stop();

This simply stops our moviclip from playing automatically (remember, we want the changes to take effect when the mouse rolls over the rectangle, like a button). Add the same ActionScript to the “actions” layer at frame 15 and 30. Our button symbol is now complete, so we need to return to the main timeline (Scene 1) where we will be adding the ActionScript that controls the button functionality.

Click on the button symbol, and give it an appropriate instance name in the Property Window. I’ve used “mc_button”. With the symbol still selected (but NOT in editing mode), add the following code to the Actions panel:

on (rollOver) {
_root.mc_button.gotoAndStop(“btn_over”);
}

on (rollOut) {
_root.mc_button.gotoAndStop(“btn_off”);
}

on (press) {
_root.mc_button.gotoAndStop(“btn_down”);
}

on (release) {
_root.mc_button.gotoAndStop(“btn_off”);
getURL(“http://www.spitshine-design.com”);
}

UPDATE: I’ve been finding several readers having trouble with doing a straight copy/paste of this code from the Web. I believe the issue lies in the quotation marks (“). When copying from the Web, it sometimes uses “smartquotes”. If you are getting an error on test regarding the quote marks, first step is to be sure you are using regular quotes (type them in instead of copy/paste from the Web site). If you are still having problems, feel free to drop me a comment and I will try my best to help resolve your issues. – Mike

That’s it, our movie clip as a button is now complete. Go ahead and test your movie and check the button state change when you roll on, roll off, mouse down or mouse release.

Now I will try and explain the code.

on (rollOver) {

This is saying when the user rolls their mouse over the button, perform the actions within the curly brackets.

_root.mc_button.gotoAndStop(“btn_over”);
}

This is telling flash to go to the instance of “mc_button”, and go to the frame labeled “btn_over” and stop.

on (rollOut) {
_root.mc_button.gotoAndStop(“btn_off”);
}

on (press) {
_root.mc_button.gotoAndStop(“btn_down”);
}

on (release) {
_root.mc_button.gotoAndStop(“btn_off”);
getURL(“http://www.spitshine-design.com”);
}

This code is basically doing the same thing as above for the various mouse events (roll off, click and release).

getURL(“http://www.spitshine-design.com”);

This is the destination URL for when a user releases the mouse button while over the button. You can set this url to whatever you like.

While this tutorial seems pretty lengthy, it’s really because I wanted to be as detailed as possible so users can understand what is happening. Once you do this once or twice, I think you will find that creating movie clip buttons is fast and simple, and as you learn more about Flash, you will be able to create more animated buttons rather than just a simple color change. I plan to do another tutorial in the near future that illustrates some of the advanced effects you can apply to a button when you create it using the movie clips symbol as opposed to the button symbol.

I hope this Flash tutorial was helpful, and as always comments, questions or feedback are always welcome!

Source files: Flash Button Tutorial: Source File

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc..

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: This is the next step to our Flash Target Game, which I started in a tutorial for a custom mouse pointer. Ideally you would want to continue with those files, but you should still be able to learn how to play a movie clip with a mouse click in Flash through this tutorial.

Demo: Play movieclip with mouse click: Demo

Let’s get started!

What we will be doing is adding a simple bullet or firing action to the scope that will be activated with the click of the mouse. Let’s start with the final file from the previous tutorial (download the file here: Flash tutorial: Custom mouse pointer). Select “File > Open” (command-”O”) to open the .fla file. Do a “Save As”, and give it the appropriate name. I will call this “target_tut_2.fla”.

On the “scope” layer, double click on the image to bring us into the “mc_scope” editing stage. Double click on the outer circle to select it, and copy (Edit > Copy or command-C). Create a new layer, and do a Paste in Place (Edit > Paste in Place or shift-command-V). With our circle still selected, set the fill color to one of the radial gradients on the bottom of the color selector palette, and change the stroke to none. Move this layer to the bottom of the timeline, and lock all other layers. With the circle selected, you should be able to set the color of the gradient by clicking on the small square on the color scale in the color palette (Window > Color or shift-F9 (Fig. 1)), (Tip: be sure to select the color square on the gradient scale and not the paint bucket in the upper left corner of the color palette). Double click on the smaller square on the gradient scale and select a bright yellow (#ffff00). You should now have a circle with a yellow center and black edge, underneath our “scope” image (Fig. 2).

Double click on our new circle again, and convert this to a movie clip symbol (Modify > Convert to Symbol or F8). Be sure to select the “movie clip” radial, and then give it an appropriate name, I will call this “mc_bullet”. Also, we need to give this clip an instance name in the Property panel. I like to use the same instance name as my symbol name, in this case “mc_bullet”. What we will be doing is animating this symbol to make a “shooting” effect. To do this, let’s double-click on the symbol to take us into the editing mode. Once in editing mode, we need to select the circle and convert this to a symbol again, but this time we need to make this a graphic symbol, and give it a new name, I will call mine “img_bullet”. Add a new keyframe (Insert > Timeline > Keyframe or F6) on frame 6 on the timeline. Now, on frame 6, select our symbol and scale it to 0%. Select any frame between 1 and 5, and create a motion tween (Insert > Timeline > Create Motion Tween). What you now have is a very quick animation of the circle going from very full size, to very tiny (disappearing). The last thing we need is for our clip to start with a blank or empty frame, so to do this, on the layer with our circle, drag keyframe 1 to keyframe 2. You should now have a timeline that looks similar to Fig. 3 below. We now need to add some ActionScript to control this movie clip.

Create a new layer, move it to the top and name it “actions”. On the first frame of this layer, insert the following code in the Actions window (Windows > Actions or alt-F9):

stop();

What this does is stop our movie clip from playing because we only want it to play when we click our mouse. Click on frame 6 of the actions layer and insert a blank keyframe (Insert > Timeline > Blank Keyframe or F6). On this keyframe add the following code to the Actions window:

gotoAndStop(1);

What this does is send our playhead back to the start of our clip, and stops it since again, we only want it to play when we click our mouse.

Let’s go ahead and test our movie. You’ll notice that nothing is really happening. This is because we haven’t set the ActionScript that tells this movie clip to “fire” our bullet. Let’s go back to our Flash document. Go to the main timeline of our movie (Scene 1) and click on the frame 1 of the “actions” layer and open the actions window (Window > Actions or alt-F9). You should already have the following code from the previous tutorial (or something very similar):

_root.onEnterFrame = function() {
Mouse.hide();

mc_scope._x = _xmouse;
mc_scope._y = _ymouse;
}

Remember from our last tutorial that this controls the movement of our “scope”. Directly below this code, add the following line of code:

onMouseDown = function() {
_root.mc_scope.mc_bullet.play();
}

This is the code that will tell our “bullet” to “fire”. Here is the code explained:

onMouseDown = function () {

This line basically is saying, whenever the user clicks on their mouse button (onMouseDown), perform the actions between the curly brackets.

_root.mc_scope.mc_bullet.play();
}

This is telling our “mc_bullet” movieclip to play. Note that our “mc_bullet” movie clip is a “nested” movie clip, which means it is placed within our mc_scope symbol. Our action needs to provide the path to our mc_bullet movieclip. So in this example:

_root = the main timeline (Scene 1)
.mc_scope = the instance name of our “scope” movieclip
.mc_bullet = the instance name of our “bullet” animation

Go ahead and test your movie again. This time, the mouse should still control the movement of the scope, and when you click the mouse button, you should see the animation of the “bullet” circle take place.

I hope you found this Flash tutorial helpful, and as always feel free to leave any comments or questions below. Also, check out a second tutorial on playing a movie clip on mouse click that provides a different option for accomplishing this task.

Source Files: Play movieclip with mouse click: Source File

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: In this tutorial, I will explain how to make a pointer or scope that could possibly be used for a shooting or target game. As with many things in Flash, there are different ways to accomplish this, but I found this to be pretty straight forward and simple. In future tutorials, I will be explaining more steps on how to create a target shooting game, but this is a starting tutorial and will get you acquainted with Flash and ActionScript.

Demo: Custom Mouse Pointer Flash Tutorial: Demo

Let’s get started!

Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file. Save the file, and give it the appropriate name. I will call this “target_tut_1.fla”. Feel free to change the document dimensions (“Modify > Document or “command-J”), to whatever you like, but I chose to use 300 x 300 pixels.

The first thing I will do is draw the pointer or “scope”, similar to what you see in the movies when a sniper looks through the scope of a rifle. Select the “Oval tool” from your tool box, and use a red stroke, with no fill. Draw a small circle on the stage (Tip: holding shift when you drag the mouse will create a perfect circle). Select the entire circle and go to “Modify > Convert to Symbol” (F8). Give this an appropriate name (I will use “mc_scope”) and select the “Movie Clip” radial. Your circle is now a symbol. We will now need to edit the symbol to complete the “scope” look. Double click on the circle to bring you into the symbol. Select the entire cirlce (Tip: you will see white dots in the circle as opposed to a blue square around the circle if you are in the symbol editing mode when the shape is selected). Add a new layer to the symbol, and choose “Edit > Past in Place” (command-shift-V) to add another circle to the new layer. Select one layer (either one, it doesn’t matter), and scale this circle to 50%. (Tip: to easily scale an object, use the “Transform” pallette: “Windows > Transform” (command-T).

—- ads by google —-

We now have one smaller cirlce inside a larger one (Fig. 1)… we now need to add the crosshairs. What we want to do is draw a cross in the center of the circle. One easy way I do this is select the outer circle and choose the transform tool. What this will do is give you a box around the outer circle with “handles” (small squares used to manipulate or “transform” the object) on all corners, and at the halfway point of each dimension. These can be used as qucik visual in order to drag guides out and find the exact center of the circle. Simply drag a top and side guide and drop on the handles at the center points of the box (Fig 2, the green lines are Flash guidelines). Now, using the line tool, we can draw a vertical and horizontal line through the circles on the guide lines (Tip: hold “shift” while dragging to create a perfectly straight line). You want to extend the lines beyond the edges of the outer circle. A little lenghty desciption here, but you should now have your scope image.

Return to the main stage (clicking “scene 1″ under the timeline). Click on the symbol once to select it, and with it selected, give the symbol an appropriate instance name in the “Properties” window. A personal preference of mine is to give it the same instance name as the symbol name, in this case “mc_scope”, but it is important to note that symbol name and instance name do not refer to the same thing. I will be writing a mini-tutorial on the difference between a “symbol” name and an “instance” name, but until then, feel free to leave a comment. Now that we have given our symbol an instance name, it’s time to get to the fun part…. adding the ActionScript!

On the main movie timeline, add a new layer and name it “actions”. (Tip: Although not absolutely necessary, it is good practice to always place your actions layer on the top layer of your document). On the first keyframe of the “actions” layer, insert the following code:

_root.onEnterFrame = function() {

mc_scope._x = _xmouse;
mc_scope._y = _ymouse;
}

(Tip: Where the code reads “mc_scope”, you would need to change to whatever you used as the instance name for your movie clip symbol.)

That’s it! We are now done! You can go ahead and test your movie. Cool huh? What? you thought there would be long lines of crazy, confusing code? Nope. Just a couple lines. Pretty simple, right?

Ok, so did you think I was going to leave it at that without explaining the code? Of course not! Here we go….

_root.onEnterFrame = function() {

The “onEnterFrame” command is telling the Flash player to perform the actions within the curly brackets whenever the playhead is on that frame.

mc_scope._x =_xmouse;
mc_scope._y = _ymouse;
}

The code between the curly brackets is what is controlling the X and Y position of the instance “mc_scope” and matching it up to the X and Y postion of the mouse. Sound confusing?

Basically, _xmouse is the X position of the users mouse on the stage… and therefore _ymouse is the Y position. Whenever the user moves their mouse on the file, these numbers will change. What we are doing is simply saying “whatever the X and Y position of the users mouse is, make that the X and Y postion of mc_scope as well”. Simple as that!

When you test the movie, you will see your mouse pointer on the stage, and wherever you move the mouse pointer, your scope will follow. I left the mouse visible to give you a better visual of what exactly is happening with the code. However, what we probably want for a more “realistic” look is to “hide” the mouse pointer and just have our scope be our mouse pointer. To do this we simply add the following line of after the opening curly bracket:

Mouse.hide();

This, as you can probably guess, “hides” the mouse pointer from the stage. However, the X and Y coordinates of where the mouse pointer would be are still established, so our code is still operating the way it should be.

Now, we are done with the first stage of a target game. Again, as with many tasks in Flash, there are multiple ways to do things, and this is just one, but I hope you found this exlpanation helpful, and I hope to continue writing more tutorials to finish a complete target shooting game.

As always, comments are welcome, whether you have question or maybe you have a better way to do this, I’d love to hear it!

Source Files: Flash tutorial: Custom mouse pointer

If you liked this tutorial, check out the second part: Adding the bullet animation and learn to play a movie clip with the mouse click in Flash.

So what do I mean by “sort of”? Well, I say “sort of” because I just put up a handful of design projects, definitely not the full scope of my graphic design portfolio, or all of my Web design and Flash development projects.

I still have quite a few items that I’d like to get up there, and I fully intend to, very soon in fact. Which is why I left the launch date of March 2008 (notice, I wasn’t specific as to what day in March…). But at least there’s enough up there to start to get my work seen by others.

I’ve really been enjoying looking at some of my older projects, even the student work that I’ve done, and see the good (and unfortunately not-so-good) work that I’ve done. I’ve seen some real progression in my work. I have even posted some graphic design projects from college, so check out the portfolio and see if you can see any improvement. I plan to post some more of my “older” work soon, as well as some new stuff I haven’t even finished yet, so check back soon for updates. And of course there are the design tutorials that I’ve been planning on doing, so hopefully I can get those up soon too.

I also say “sort of”, because this being a one-man show (in my spare time to boot), there are definitely some kinks to be worked out. But at least with things live, I can get things checked out, and hopefully have some others take a look and catch things I might have missed by staring at it too long. So check things out, and feel free to comment (constructive criticism is always welcome) and let me know what you think.