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.